如何利用HTML实现网页内指定内容的禁止选中_通过user-select属性-html教程-PHP中文网

chrome 54+、firefox 69+、safari 3.1+、edge 79+ 原生支持 user-select: none；ie10–11 需 -ms-user-select，旧版 safari（如14.0及更早）需 -webkit-user-select。

如何利用html实现网页内指定内容的禁止选中_通过user-select属性

Chrome 54+、Firefox 69+、Safari 3.1+、Edge 79+ 原生支持 user-select: none；IE10–11 需要加 -ms-user-select 前缀；旧版 Safari（

实际项目中，如果还要兼容 IE11，得同时写两行：

div.no-select {
  -ms-user-select: none;
  user-select: none;
}

注意：WebKit 内核的旧版本（如 Safari 8）曾把该属性叫作 -webkit-user-select，但现在已废弃，仅在极老环境（iOS 8.4 或 macOS 10.10）里可能需要补上，但绝大多数现代项目可忽略。

因为 user-select 不是继承属性，但浏览器对某些元素有默认强制行为 —— 比如 input、textarea、select 这类表单控件，即使父级设了 user-select: none，它们内部文字依然可选。这不是 bug，而是规范允许的“用户代理样式覆盖”。

要真正禁用，必须显式设置：

user-select: none 只控制文字是否能被鼠标拖拽选中，不影响右键菜单、Ctrl+C 复制（只要内容在 DOM 中且未被 JS 移除）、也不阻止 document.execCommand('copy') 调用。

html-ppt-to-pdf

将使用 `

` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。

下载

但要注意几个边界情况：

如果元素内含 img，图片本身不能被“文字选中”，但用户仍可右键另存为 —— 这跟 user-select 无关，得靠 oncontextmenu 或 CSS pointer-events: none 控制
设置了 user-select: none 的元素，若同时有 tabindex 且获得焦点，键盘 Shift+→ 仍可能触发部分浏览器的伪选中（尤其 Firefox），此时建议加 unselectable="on" 属性作为补充（仅 IE/Edge Legacy 有效）
无障碍访问（如屏幕阅读器）不受影响，该属性不改变语义或焦点逻辑

在框架中直接写 style={{ userSelect: 'none' }} 是可行的，但容易漏掉前缀或拼写错误（比如写成 user-select 字符串形式会报错）。

更稳妥的做法：

Vue：用 :style="{ WebkitUserSelect: 'none', msUserSelect: 'none', userSelect: 'none' }"
React：推荐封装一个工具函数，避免每次手写多套 key，例如：const noSelectStyle = { WebkitUserSelect: 'none', MozUserSelect: 'none', msUserSelect: 'none', userSelect: 'none' };
不要依赖 CSS-in-JS 库的自动前缀（如 styled-components v5 默认关了 autoprefixer），需确认构建配置启用了相关插件

最麻烦的是 SSR 场景：服务端渲染时，user-select 不会影响首屏，但 hydrate 后若 JS 动态改了 style，可能造成水合不一致警告 —— 此时建议统一用 class 控制，而非内联 style。