3.2 新增的全局属性
实例064 使用鼠标光标拖动网页中的文字
本实例是一个提高效率、人性化的程序
实例位置：光盘\mingrisoft\03\064
实例说明
本实例将实现使用鼠标光标拖动网页中文字的效果。在Chrome 浏览器中运行本实例，当用户选中网页中的文字并移动鼠标时，可以实现拖动的效果。运行结果如图3.28所示。
图3.28 使用鼠标拖动网页中的文字
技术要点
在HTML5中，通过网页元素的draggable属性可以设置是否允许用户拖动网页中的元素。语法如下：
<element draggable="true|false|auto">
该属性有如下3个值。
● true：表示鼠标选中元素后，可以进行拖动的操作。
● false：表示鼠标选中元素后，不能进行拖动的操作。
● auto：使用浏览器的默认特性。
说明：目前只有Firefox、Chrome以及Safari支持draggable属性。
实现过程
创建index.html文件，在文件中使用article元素显示一段文字，并设置article元素的属性“draggable”值为“true”。代码如下：
<!DOCTYPEhtml>
<html>
<head>
<meta charset="utf-8"/>
<title>使用元素的draggable属性</title>
<link href="css.css" rel="stylesheet" type="text/css">
</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属性。语法如下：
<element hidden="hidden">
在页面中可以对元素的hidden属性进行设置，使用户在满足某些条件时才能看到某个元素。然后，可使用JavaScript来删除hidden属性，使该元素变得可见。
实现过程
创建index.html文件，在文件中使用<nav>元素设置两个单选按钮，一个用于显示<article>元素，另一个用于隐藏<article>元素，然后编写相应的JavaScript代码实现隐藏和显示的功能。代码如下：
<!DOCTYPEhtml>
<html>
<head>
<meta charset="utf-8"/>
<title>hidden属性的使用</title>
<link href="css.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
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>
<nav style="padding-top:5px;padding-bottom:5px">
<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">
<input type=text spellcheck=false/>
<!--以下书写方法为错误--!>
<textareaspellcheck >
注意：如果元素的readOnly属性或disabled属性设为true，则不执行拼写检查。
实现过程
创建index.html文件，在文件中分别创建两个<textarea>元素。第一个元素将“spellcheck”属性设置为“true”，即需要语法检测；另外一个元素的“spellcheck”属性设置为“false”，即不需要语法检测。代码如下：
<!DOCTYPEhtml>
<html>
<head>
<meta charset="utf-8"/>
<title>spellcheck属性的使用</title>
<link href="css.css" rel="stylesheet" type="text/css">
</head>
<body>
<h5>文本域中语法检测属性</h5>
<p>需要检测<br/>
<textarea spellcheck="true"class="inputtxt"></textarea>
</p>
<p>不需要检测<br/>
<textarea spellcheck="false"class="inputtxt"></textarea>
</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>
<meta charset="utf-8"/>
<title>使用contenteditable属性</title>
<link href="css.css" rel="stylesheet" type="text/css">
<script type="text/javascript" async="true">
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>
<input type="button" value="保存" class="inputbtn" onClick="Btn_Click();">
</body>
</html>
举一反三
根据本实例，读者可以进行以下操作。
为列表元素添加可编辑属性。
通过Ajax技术对编辑后的内容进行保存。