常用HTML全局属性学习记录
accesskey
指定访问当前元素的快捷键。(此时并没有深入去研究这个属性,但是当一个产品用户体量很大的情况下就需要去做快捷键和无障碍访问部分。)
autocapitalize
autocapitalize属性用来控制文本在用户输入/编辑时的大小写,这个属性更适合英文场景,中文场景无效。
contenteditable
可以让元素处于内容可编辑状态。
其中属性值true和false是所有浏览器都支持的,而plaintext-only等属性值火狐浏览器并不支持。
data-*
指开发人员自己设置的各种自定义属性,方便开发的时候获取。
除了使用 HTMLElement.getAttribute() 方法,还可以使用 HTMLElement.dataset 访问这些自定义属性值,详细看这篇文章
dir
dir属性是可以改变文档流的水平流动方向,设计的初衷是用在多语言处理中。因为有的语言是从右至左的。
- ltr,指从左到右,用于那种从左向右书写的语言(比如英语);
- rtl,指从右到左,用于那种从右向左书写的语言(比如阿拉伯语);
- auto,指由用户代理决定方向。它在解析元素中字符时会运用一个基本算法,直到发现一个具有强方向性的字符,然后将这一方向应用于整个元素。
在聊天界面的布局中可以得到应用
draggable
draggable属性在拖拽交互中非常有用。
draggable 可以有如下取值:
- true:表示元素可以被拖动
- false:表示元素不可以被拖动
浏览器默认行为是内容可以拖拽,布局不能。
但是,有时候我们希望某些内容不能拖拽,但是布局可以拖拽,则就需要用到draggable属性,(详细看这个文章)
hidden
hidden属性可以让元素隐藏,表现为display:none,相比类名或者style设置display:none的优点在于优先级极低,可以轻松reset。
inputmode
inputmode的作用是告知虚拟键盘应该显示何种类型的键盘,例如是显示数字键盘呢,还是显示网址键盘还是显示邮箱键盘?
对于元素,这个属性是个鸡肋,请使用原生的兼容性更好的type属性,例如:
inputmode属性适合设置了contenteditable的普通元素,例如:
tabindex
tabindex可以用来设置元素是否能够被Tab键索。
还没有评论,来说两句吧...