100. 全局属性概览

本节目标：理解什么是全局属性，掌握最常用的几个：contenteditable、draggable、hidden、spellcheck、tabindex。

什么是全局属性

HTML 标签有很多属性，比如 href 是 <a> 专属、src 是 <img> 专属。但有一类属性，任何 HTML 元素都能用，它们叫”全局属性”。

Note

class、id、style 你最熟悉了。本节重点讲你不一定全见过的那些。

加了这个属性，用户可以直接在页面上改内容：

<div contenteditable="true">
  点击这里就能编辑
</div>

常见用途：

// 监听编辑内容变化
document.querySelector("[contenteditable]").addEventListener("input", function () {
  console.log("当前内容：", this.innerHTML);
});

前面拖放过详细讲过。简单说就是：

<div draggable="true">能拖动</div>

值可以是 true、false、auto（浏览器决定）。图片和链接默认 auto。

hidden 是 HTML5 新增的布尔属性，相当于 display: none：

<p hidden>这行看不见</p>
<p hidden="hidden">效果一样</p>

通过 JS 控制显隐：

element.hidden = true;  // 隐藏
element.hidden = false; // 显示

和 CSS 的 display: none 有什么区别？

Tip

更推荐用 hidden 而不是 style="display:none"。语义更清晰，JS 操作也简单。

浏览器默认对 <textarea> 和可编辑区域开启拼写检查（红色波浪线）：

<textarea spellcheck="true">拼错了会有红线</textarea>
<input type="text" spellcheck="false"> <!-- 关闭拼写检查 -->

合理设置能提升体验：

按 Tab 键时，焦点在各个可聚焦元素间切换。tabindex 控制这个顺序：

<input tabindex="2">
<input tabindex="1">  <!-- 这个会先被聚焦 -->
<button tabindex="3">按钮</button>

Warning

别用正数 tabindex。99% 的场景不需要。它会让可维护性变差。需要时才用 0 或 -1。

鼠标悬停时显示一个小气泡提示：

<p title="这是一段悬停提示">鼠标放上来试试</p>
<abbr title="HyperText Markup Language">HTML</abbr>

用途：

Note

title 提示对触屏设备不友好（悬停不会触发），而且无障碍体验一般。重要信息别只靠 title 传递。

下一节继续讲 accesskey、dir、lang、translate、popover 等更多全局属性。