学习笔记之HTML5新增全局属性

最新推荐文章于 2022-04-25 12:06:50 发布

天然呆ftt

最新推荐文章于 2022-04-25 12:06:50 发布

阅读量554

点赞数

CC 4.0 BY-SA版权

文章标签： HTML5

本文链接：https://blog.youkuaiyun.com/feng_en_t/article/details/85248555

1. ontenteditable属性

ontenteditable属性的主要功能是允许用户在线编辑元素中的内容。ontenteditable是一个布尔属性，可以被指定为true或false。属性为true时，元素被指定为允许编辑；属性为false时，元素被指定为不允许编辑；未被指定为true或false时，则由inherit状态来决定，那就是，如果元素的父级元素是可编辑的，则该元素就是可编辑的，否则反之。以上就是ontenteditable该属性隐藏的inherit（继承）状态。

下面我们看一个例子，在为列表元素加上ontenteditable属性后，用户可自行在浏览器中修改列表内容。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>test</title>
	</head>
	<body>
		<h1>可编辑的列表</h1>
		<ul contenteditable="true">
			<li>元素1</li>
			<li>元素2</li>
			<li>元素3</li>
		</ul>
	</body>
</html>

在浏览器中预览效果如下：

需要注意的一点就是：在编辑完内容后，如果想要保存其中的内容，只能把该元素的innerHTML发送到服务器端进行保存。

2. designMode属性

designMode属性用来指定整个页面是否可编辑，当页面可编辑时，页面中任何支持上面所述的contentEditable属性的元素都变成了可编辑状态。designMode属性只能在javascript脚本里被编辑修改。该属性有两个值：on和off，当被指定为on时，页面是可编辑的，指定为off时，页面是不可编辑的。

示例：使用javascript脚本来指定designMode属性的用法如下：

document.designMode = "on"
document.designMode = "off"

注意：

针对designMode属性，各个浏览器的支持情况也各不相同。

Chrome3和Safari浏览器：使用内嵌frame的方式，该内嵌frame是可编辑的。

IE8浏览器：出于安全考虑，不允许使用designMode属性让页面进入可编辑状态。

IE9浏览器：允许使用designMode属性让页面进入可编辑状态。

Firefox和Opera浏览器：允许使用designMode属性让页面进入编辑状态。

3. hidden属性

HTML5中，所有元素都允许使用一个hidden属性。该属性类似于input元素中的hidden属性，功能是通知浏览器不渲染该元素，使该元素处于不可见状态。但是元素中的内容还是浏览器创建的，也就是说页面装载后允许使用javascript脚本将该属性取消，取消后该元素变为可见状态，同时元素中的内容也即时显示出来。hidden属性是一个布尔值的属性，当设为true时，元素处于不可见状态；当设为false时，元素处于可见状态。

4. tabindex属性

tabindex属性，当不断按Tab健让窗口或页面中的控件获得焦点，对窗口或页面中的所有控件进行遍历的时候，每一个控件的tabindex属性表示该控件是第几个被访问到的。

5. spellcheck属性

spellcheck属性是HTML5针对input元素（type=text）与textarea这两个文本输入框提供的一个新属性，它的功能是对用户输入的文本内容进行拼写和语法检查。

spellcheck属性是一个布尔值的属性，具有true或false两种值。但是它在书写时有一个特殊的地方，就是必须明确属性值为true或false。

用法如下：

<textarea spellcheck = "true">
<input type=text spellcheck = false>