html如何取消文本选中-猿码集

HTML如何取消文本选中

在网页开发中，有时候需要防止用户对文本进行复制和选择操作。本文将介绍如何使用CSS和Javascript取消文本的选择和复制功能。

使用CSS禁止文本选择

可以通过CSS样式来禁止文本选择，示例代码如下：


body {
    -webkit-user-select: none;  /* Chrome 和 Safari */
    -moz-user-select: none;     /* Firefox */
    -ms-user-select: none;      /* IE10 */
    user-select: none;          /* 标准语法 */
}

注意： CSS禁止文本选择是使用CSS3的属性，低版本浏览器不支持。需要在浏览器前缀中添加-webkit、-moz、-ms来兼容不同浏览器。

使用Javascript阻止文本选择和复制

方法一：使用onselectstart事件

在HTML中，可以通过在标签上添加onselectstart事件来阻止文本选择。当用户尝试选择文本时，onselectstart事件会触发并返回false，从而取消文本的选择和复制功能。示例代码如下：


<body onselectstart='return false;'>
  <p>这是一段文本，不能被选择和复制</p>
</body>

注意：这种方法只能防止文本选择和复制，但无法防止使用其他方式抓取文本。

方法二：禁用鼠标右键菜单

在Javascript中，可以通过禁用鼠标右键菜单来防止文本选择和复制。当用户尝试右键选择文本时，浏览器默认会弹出右键菜单，我们可以通过阻止事件的默认行为来禁用右键菜单。示例代码如下：


<script>
  document.oncontextmenu = function(){
     return false;
  }
</script>

注意：这种方法只能禁用鼠标右键菜单，在移动设备上无效。

方法三：使用onmousedown、onmouseup和ondragstart事件

在Javascript中，我们可以捕获鼠标mousedown、mouseup和ondragstart等事件，并返回false来取消文本的选择和复制功能。示例代码如下：


<script>
  document.onmousedown = function(){
     return false;
  }
  document.onmouseup = function(){
     return false;
  }
  document.ondragstart = function(){
     return false;
  }
</script>

注意：这种方法可能会影响一些鼠标事件的触发，需要谨慎使用。

小结

本文介绍了使用CSS和Javascript来取消文本选择和复制功能。通过添加CSS样式、禁用鼠标右键菜单以及捕获各种事件等方法来处理，使得用户无法选择、复制或抓取文本。需要根据实际开发需要选择合适的方法进行处理。

html如何取消文本选中