HTML5禁止文字选中方法与_userselect属性解析

用 user-select 禁止文字选中（CSS 方式）

必须通过 CSS 设置，支持主流浏览器（Chrome 54+、Firefox 69+、Safari 3.1+、Edge 12+），IE 用旧版 -ms-user-select。

• user-select: none：彻底禁用用户选中，包括鼠标拖拽、双击、三击、Ctrl+A 都无效
• 它只影响“用户主动触发”的选中行为，不影响 JS 脚本调用 window.getSelection() 或 document.execCommand('selectAll')
• 对表单控件（<input>、<textarea>）默认不生效，需额外加 pointer-events: none 或用 readonly 控制

/* 禁用某段文字选中 */
.no-select {
  user-select: none;
  -webkit-user-select: none; /* Safari 和旧版 Chrome */
  -moz-user-select: none;    /* Firefox */
  -ms-user-select: none;     /* IE10+ */
}
<p>/<em> 应用到元素 </em>/
<p class="no-select">这段文字无法被选中</p></p>

为什么 onselectstart 和 unselectable 不推荐

这两个是 IE 时代的遗留方案，现代开发应避免：

• onselectstart 是 DOM 事件，仅 IE 和旧版 Edge 支持，Chrome/Firefox 完全不触发
• unselectable="on" 是 IE 专有 HTML 属性，仅对 IE6–10 有效，且只作用于元素自身，子元素仍可被选中（除非全部递归加）
• 两者都无法阻止键盘 Ctrl+A 全选，也不影响右键「复制」菜单的可用性

常见误用场景与修复建议

实际项目中容易踩坑的地方：

• 在按钮或图标上加 user-select: none 后，发现点击反馈变弱 → 实际是误加了 pointer-events: none，二者无关，别混用
• React/Vue 中动态切换选中状态，直接改内联 style 时漏掉前缀 → 推荐用 CSS 类切换，或用 styled-components / css-in-js 自动注入前缀
• 禁用选中后，无障碍访问（如屏幕阅读器）可能受影响 → 若该区域含重要文本，考虑保留选中能力，或用 aria-live 等补充语义
• 移动端 Safari 对 user-select: none 响应较慢，长按仍可能唤出菜单 → 可加 -webkit-touch-callout: none 抑制右键菜单

真正要禁用选中，就老实用 user-select: none 配全浏览器前缀；别指望 HTML 属性或事件监听能跨浏览器兜底。兼容性细节和移动端响应延迟，是最容易被忽略的实际复杂点。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《HTML5禁止文字选中方法与_userselect属性解析》文章吧，也可关注golang学习网公众号了解相关技术文章。