首页 > 代码库 > css取消双击选中文字

css取消双击选中文字

在我们在写前端页面的时候,由于手速过快(当然这都是指的老司机),会经常双击,浏览器就会默认选中你双击的文本,这种感觉有点不太好。

这个时候就用到了  user-select:none; 属性。

因为存在着兼容性的问题,所以在写的时候就需要考虑一下了。

div{
    -moz-user-select:none;/*火狐*/
    -webkit-user-select:none;/*webkit浏览器*/
    -ms-user-select:none;/*IE10*/
    -khtml-user-select:none;/*早期浏览器*/
      user-select:none;
}

这样这个区域的文字就不会被选中了。

 

还有种方法就是在相应的元素上添加  onselectstart="return false;"

<section onselectstart="return false;">这又是一段文字</section>

这样也是可以实现不被选中的效果。

 

如果把上述的方法写到body中,就实现了禁止用户选中页面上内容的效果。

 

*在网页上选择文本的功能在许多用户方案中非常重要,假如是一个新闻页面,新闻的内容是可以被选中的,但是页面还可能包含用户不需要或不希望选择的菜单,广告和指向站点、等。所以使用的时候还是看需求了。

css取消双击选中文字