实例064 使用鼠标光标拖动网页中的文字_HTML5程序开发范例宝典-QQ阅读男生都市网

书名：HTML5程序开发范例宝典
作者名：韩旭高飞孙桂杰编著
本章字数：397字
更新时间：2024-12-21 21:58:34

3.2 新增的全局属性

实例064 使用鼠标光标拖动网页中的文字

本实例是一个提高效率、人性化的程序

实例位置：光盘\mingrisoft\03\064

实例说明

本实例将实现使用鼠标光标拖动网页中文字的效果。在Chrome 浏览器中运行本实例，当用户选中网页中的文字并移动鼠标时，可以实现拖动的效果。运行结果如图3.28所示。

图3.28 使用鼠标拖动网页中的文字

技术要点

在HTML5中，通过网页元素的draggable属性可以设置是否允许用户拖动网页中的元素。语法如下：

该属性有如下3个值。

● true：表示鼠标选中元素后，可以进行拖动的操作。

● false：表示鼠标选中元素后，不能进行拖动的操作。

● auto：使用浏览器的默认特性。

说明：目前只有Firefox、Chrome以及Safari支持draggable属性。

实现过程

创建index.html文件，在文件中使用article元素显示一段文字，并设置article元素的属性“draggable”值为“true”。代码如下：

<!DOCTYPEhtml>

<html>

<head>

<title>使用元素的draggable属性</title>

</head>

<body>

<h5>元素的draggable属性</h5>

<articledraggable="true"class="drag">

这是一段可以拖动的文字,用鼠标选中后进行拖动。

</article>

</body>

</html>

举一反三

根据本实例，读者可以进行以下操作。

使用鼠标光标拖动网页中的图像。

设置超链接不能被拖动。

实例065 自动隐藏或显示网页中的文字

本实例是一个提高效率、人性化的程序

实例位置：光盘\mingrisoft\03\065

实例说明

本实例将实现自动隐藏或显示网页中的文字。在Chrome浏览器中运行实例，结果如图3.29所示。当用户单击“隐藏”单选按钮时，文字将被隐藏，运行结果如图3.30所示。

图3.29 显示网页中的文字

图3.30 隐藏网页中的文字

技术要点

本实例主要应用的是HTML5中新增的hidden属性。在HTML5中，绝大多数的元素都支持hidden属性。语法如下：

在页面中可以对元素的hidden属性进行设置，使用户在满足某些条件时才能看到某个元素。然后，可使用JavaScript来删除hidden属性，使该元素变得可见。

实现过程

创建index.html文件，在文件中使用<nav>元素设置两个单选按钮，一个用于显示<article>元素，另一个用于隐藏<article>元素，然后编写相应的JavaScript代码实现隐藏和显示的功能。代码如下：

<!DOCTYPEhtml>

<html>

<head>

<title>hidden属性的使用</title>

function Rdo_Click(v){

var strArt=document.getElementById("art");

if(v==1){

strArt.removeAttribute("hidden");

}else{

strArt.setAttribute("hidden","hidden");

}

</script>

</head>

<body>

<h5>元素的隐藏属性</h5>

<input type="radio" id="rdoHidden_1" onClick="Rdo_Click(1)"name="rdoHidden" value="1" checked="true"/>显示

<input type="radio" id="rdoHidden_2" onClick="Rdo_Click(0)"name="rdoHidden" value="0"/>隐藏

</nav>

<articleid="art" class="art">

欢迎您光临明日图书网！

</article>

</body>

</html>

举一反三

根据本实例，读者可以进行以下操作。

自动隐藏或显示网页中的图片。

自动隐藏或显示子菜单。

实例066 自动检测输入的拼音是否正确

本实例是一个提高效率、人性化的程序

实例位置：光盘\mingrisoft\03\066

实例说明

本实例将实现自动检测输入的拼音或语法是否正确。其在Opera浏览器中的运行结果如图3.31所示。由图可以看出，在两个文本域中输入同样的内容“HTM”，第一个文本域中的内容显示出错的红色虚线，而第二个文本域中没有任何提示。

图3.31 对输入的语法自动检测

技术要点

本实例主要应用HTML5 中新增的spellcheck属性。spellcheck属性是布尔型，它告诉浏览器检查元素的拼写和语法。如果没有这个属性，默认的状态表示元素根据默认行为来操作，可能是根据父元素自己的 spellcheck状态。因为 spellcheck属性属于布尔值属性，因此它具有true或false两种值。但是它在书写时有一个特殊的地方，就是必须明确声明属性值为true或false，书写方法如下所示：

<!--以下两种书写方法正确--!>

<textareaspellcheck="true">

<!--以下书写方法为错误--!>

注意：如果元素的readOnly属性或disabled属性设为true，则不执行拼写检查。

实现过程

创建index.html文件，在文件中分别创建两个<textarea>元素。第一个元素将“spellcheck”属性设置为“true”，即需要语法检测；另外一个元素的“spellcheck”属性设置为“false”，即不需要语法检测。代码如下：

<!DOCTYPEhtml>

<html>

<head>

<title>spellcheck属性的使用</title>

</head>

<body>

<h5>文本域中语法检测属性</h5>

</p>

<p>不需要检测<br/>

</p>

</body>

</html>

举一反三

根据本实例，读者可以进行以下操作。

在文本框中对输入的语法进行自动检测。

对可编辑元素中输入的语法进行自动检测。

实例067 编辑修改网页中的文字

本实例是一个提高效率、人性化的程序

实例位置：光盘\mingrisoft\03\067

实例说明

在HTML5中有一个非常便捷的属性contenteditable，利用它可以直接对显示在页面中的文字进行编辑。本实例将实现编辑修改网页中的文字。运行实例，结果如图3.32所示。编辑修改文字后，单击“保存”按钮，可以看到已经成功修改了这段文字，如图3.33所示。

图3.32 编辑文字之前的效果

图3.33 编辑文字之后的效果

技术要点

本实例主要应用HTML5中新增的contenteditable属性。该属性的主要功能是允许用户编辑元素中的内容，所以该元素必须是可以获得鼠标焦点的元素，而且在点击鼠标后要向用户提供一个插入符号，提示用户该元素中的内容允许编辑。contenteditable是一个布尔类型属性，因此可以将其设置为true或false。如果在元素中将该属性的值设置为“true”，那么就可以对该元素显示的文本内容直接进行编辑了。

实现过程

创建 index.html 文件，在文件中分别创建两个<article>内容元素。第一个<article>元素将“contenteditable”属性设置为“true”，用于对内容进行编辑；第二个<article>元素用来保存编辑后的内容。代码如下：

<!DOCTYPEhtml>

<html>

<head>

<title>使用contenteditable属性</title>

function Btn_Click(){

var str=document.getElementById("art0").innerHTML;

var obj=document.getElementById("art1");

obj.innerHTML='<b>编辑后：</b>'+str;

}

</script>

</head>

<body>

<h5>编辑修改网页中的文字</h5>

<articlecontenteditable="true"class="art"id="art0">

这是一段可以编辑的文字

</article>

<articleclass="art"id="art1">

</article>

</body>

</html>

举一反三

根据本实例，读者可以进行以下操作。

为列表元素添加可编辑属性。

通过Ajax技术对编辑后的内容进行保存。