HTML5文档中的全局属性(draggable、hidden、spellcheck、contentditable)

鳄鱼君

发表文章数:642

热门标签

,

Vieu四代商业主题

高扩展、安全、稳定、响应式布局多功能模板。

¥69 现在购买
首页 » HTML » HTML5文档中的全局属性(draggable、hidden、spellcheck、contentditable)

全局属性是指在任何元素中都可以使用的属性。在HTML5中常用的全局属性有draggable、hidden、spellcheck、contentditable。我们来分别看一下各自的解释和使用方法。

全局属性draggable

graggable属性用来定义元素是否可以拖动,属性值有true和false。当值为true时表示元素选中之后可以进行拖动操作,否则不能拖动。我们先来看一下简单的使用:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>draggable属性</title>
</head>
<body>
<strong>元素拖动演示</strong>
<article draggable="true"> 这些文字可以被拖动</article>
</body>
</html>

全局属性hidden

hide属性的属性值有true和false。当hide属性取值为true时,元素将会被隐藏,反之则会显示。

全局属性spellcheck

spellcheck属性主要针对于input元素和textarea文本输入框,对用户输入的文本内容进行拼写和语法检查。spellcheck属性的属性值有true和false,值为true时检测输入框中的值,反之不检测。我么来看一下简单的使用,只有在谷歌浏览器会看到效果:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>spellcheck属性</title>
</head>
<body>
<strong>输入框语法检测</strong>
<p>spellcheck属性值为true<br>
<textarea spellcheck="true">html5</textarea>
</p>
<p>spellcheck属性值为false<br>
<textarea spellcheck="false">html5</textarea></p>
</body>
</html>

全局属性contentditable

contentditable属性规定是否可编辑元素的内容,前提是该元素必须可以获得鼠标的焦点并且其内容不是只读的。我们来看一下使用方法:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>contenteditable属性</title>
</head>
<body>
<strong>可编辑列表</strong>
<ul contenteditable="true">
	<li>列表1</li>
	<li>列表2</li>
</ul>
</body>
</html>

未经允许不得转载:作者:鳄鱼君, 转载或复制请以 超链接形式 并注明出处 鳄鱼君
原文地址:《HTML5文档中的全局属性(draggable、hidden、spellcheck、contentditable)》 发布于2020-04-07

分享到:
赞(0) 赏杯咖啡

评论 抢沙发

3 + 7 =


文章对你有帮助可赏作者一杯咖啡

支付宝扫一扫打赏

微信扫一扫打赏

Vieu4.6主题
专业打造轻量级个人企业风格博客主题!专注于前端开发,全站响应式布局自适应模板。
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录
切换登录

注册