如何使用 CSS 和 JS 禁止文字选择

在某些情况下，我们可能需要禁止用户选择网页上的文本内容。例如，在图片展示页面，我们可能希望用户只能查看图片，而不能选中文字进行复制。本文将介绍使用 CSS 和 JavaScript 实现禁止文字选择效果的方法。

CSS 实现

/* 禁止文字选择 */
body {
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+/Edge */
  user-select: none; /* 标准语法 */
}

这段 CSS 代码使用 user-select 属性来禁止文字选择。为了兼容不同浏览器，我们还使用了浏览器前缀：

-webkit-user-select: 用于 Safari 浏览器
-moz-user-select: 用于 Firefox 浏览器
-ms-user-select: 用于 IE10+/Edge 浏览器

JS 实现

// 禁止文字选择
document.onselectstart = function() {
  return false;
}

这段 JavaScript 代码通过监听 onselectstart 事件来禁止文字选择。当用户开始选择文字时，事件会被触发，并返回 false 来阻止默认行为。

总结

通过以上两种方法，我们可以轻松实现禁止文字选择的效果。根据实际需要，可以选择使用 CSS 或 JavaScript 来实现。需要注意的是，过度使用禁止文字选择可能会影响用户体验，例如，用户可能无法正常复制网页内容。建议在必要情况下使用该功能。