新属性和contenteditable的用法

2023-10-28 理论教育版权反馈

【摘要】：它配合menu标签使用，contextmenu的值设置为menu的id名。代码示例2.contenteditablecontenteditable规定是否可编辑元素的内容，它的属性值包括：true：可以编辑元素的内容。inherit：继承父元素的contenteditable属性。当属性值为空字符串时，效果和true一致。

1.contextmenu

在HTML5中，每个元素新增了一个属性：contextmenu，它是上下文菜单，即鼠标右击元素会出现一个菜单。它配合menu标签使用，contextmenu的值设置为menu的id名。使用这个标签时要先阻止浏览器的默认行为。

代码示例

2.contenteditable

contenteditable规定是否可编辑元素的内容，它的属性值包括：

（1）true：可以编辑元素的内容。

（2）false：无法编辑元素的内容。

（3）inherit：继承父元素的contenteditable属性。

当属性值为空字符串时，效果和true一致。

当一个元素的contenteditable状态为true（contenteditable属性为空字符串，或为true，或为inherit且其父元素状态为true）时，意味着该元素是可编辑的。否则，该元素不可编辑，如图2-3和图2-4所示。

代码示例：

图2-3 可编辑的文本(a)

图2-4 可编辑的文本(b)

3.draggable

draggable规定元素是否可以拖拽。值为true时表示可以拖拽，值为false时表示不能拖拽，值为auto时按浏览器的默认行为来定。在使用该属性时，还需要配合Javascript来实现，使用dataTransfer对象在拖拽事件中传输数据。详情参照第4章文件处理与拖放。(www.chuimin.cn)

4.dropzone

dropzone属性规定在元素上拖动数据时，是否拷贝、移动或链接被拖动数据。它的值为copy时，拖动元素时复制数据，值为move时不会复制，而是将被拖动的数据移动到新的位置上，值为link时，会产生一个指向原数据的链接。

代码示例：

5.hidden

hidden属性用于隐藏该元素。一旦使用了此属性，则该元素就不会在浏览器中被显示它的值为true时元素是可见的，值为false时元素是不可见的。

代码示例：

6.spellcheck

spellcheck属性规定是否对元素进行拼写和语法检查。它可以对以下内容进行拼写检查：input元素中的文本值（非密码）；textarea元素中的文本；可编辑元素中的文本。值为true时进行检查，值为false时不检查。

代码示例：

7.translate

translate规定是否应该翻译元素内容。值为true时可翻译，值为false时不可翻译。

代码示例：

8.表单元素属性

表单元素新添的属性也可以帮我们做一些验证，例如placeholder属性可以将光标定位到输入框的最前面、required属性用于验证值是否为空、pattern类型专为验证正则、autofocus属性可以自动聚集、autocomplete自动完成属性等，对于这些属性的设置与效果，请参照3.4节表单验证部分。

新属性和contenteditable的用法

相关推荐