通用组件的通用DOM标准属性
| 名称 |
描述 |
建议或更多 |
| accesskey |
定义元素功能快捷键的方式: chrome/windows 环境： Alt + [key], <button accesskey="s"></button> => 快捷键 Alt + s |
会有很多问题，不建议使用 |
| aria-* |
无障碍富网络应用 ARIA 属性 |
| autocapitalize |
一个枚举属性， 用于控制用户输入、编辑文本输入文本是否自动大写医技大写的方式 |
物理键盘输入以及有type属性的input不生效 |
| className |
Element.className 获取或设置元素class属性的值 |
Element.className="contianer" let elClass = Element.className |
| contenteditable |
枚举属性，描述元素的内容是否可编辑, contenteditable="true/false" |
如可编辑浏览器将元素变为用户可输入，但修改事件无法使用onChange监听 |
| data-* |
自定义全局属性 |
|
| dir |
定义文本输入方向: auto:自定义，ltr:从左往右书写的，如中国：“国之根本” , rtl: 从右往左输入的，如阿拉伯等 |
|
| draggable |
是否允许浏览器使用原生的拖拽Api |
只支持链接、图片、选中的文字的拖拽，其他拖拽需通过onDragStart等事件监听 |
| enterKeyHint |
指定虚拟键盘上的 entry键的操作方式 |
示例讲解 |
| htmlFor |
<label>和<output>的属性， 等同于原生的<label for=""> 的 for 属性 |
|
| hidden |
[boolean] :隐藏元素 |
浏览器源码： {display: none !important;} |
| id |
不能包含空格，制表符等空白字符 |
标注元素的唯一值, 18.x可以用 useId生成唯一值 例如 :r0: :r1:等 |
| is |
自定义元素的类属性 |
chrome v67+ 示例讲解 |
| inputMode |
指定输入时，弹出键盘的类型 |
目前各浏览器兼容性较差 |
| itemProp |
可给 HTML 元素添加属性以 键值对[name]:[value:string|url] 的形式 |
|
| lang |
可给 HTML 元素添加语言类型属性 依据 BCP47 |
优先级低于 xml:lang |
| 属性值 |
描述 |
建议或更多 |
| enter |
插入一个新的行,回车键常用功能 |
enterKeyHint="enter" |
| done |
input 操作已完成 |
enterKeyHint="done" |
| go |
跳转到当前输入的地址 |
enterKeyHint="go" |
| next |
跳转到下一个表单 |
enterKeyHint="next" |
| previous |
跳转到上一个表单 |
enterKeyHint="previous" |
| search |
搜索当前输入的内容 |
enterKeyHint="search" |
| send |
发送当前输入的内容到目标 |
<a href="..." enterKeyHint="send">发送</a> |
// enter
const el = document.getElementById('container-1')
el.enterKeyHint = "enter"
// html
...
<div contenteditable="">
<p>这里开始输入</p>
<p is="word-count" style="background-color: lightblue;height: 60px;color:black;"></p>
</div>
// js
// HTMLParagraphElement : Element 的api 用于定义 <p>元素的类
class WordCount extends HTMLParagraphElement {
constructor() {
super();
// 获取父节点中词的个数
const wcParent = this.parentNode;
function countWords(node){
const text = node.innerText || node.textContent;
return text.trim().split(/\s+/g).filter(a => a.trim().length > 0).length;
}
const count = `Words: ${countWords(wcParent)}`;
// 创建一个 shadowRoot 详见 **[shadowRoot](#https://developer.mozilla.org/zh-CN/docs/Web/API/ShadowRoot)**
const shadow = this.attachShadow({mode: 'open'});
const text = document.createElement('span');
text.textContent = count;
// 将包含个数的元素插入shadow
shadow.appendChild(text);
// 当父节点的字发生变化时重新计算词的个数
setInterval(function() {
const count = `Words: ${countWords(wcParent)}`;
text.textContent = count;
}, 200);
}
}
// 将类与 is 关联 'word-count' <=> WordCount
customElements.define('word-count', WordCount, { extends: 'p' });