GitHub

阻止页面文字选中的方法总结

一、CSS方法

.text{
   -webkit-user-select: none;
   user-select: none;
}
<p class="text">这里是文字这里是文字这里是文字这里是文字这里是文字这里是文字</p>

二、JS方法

<p onselectstart = "return false">这里是文字这里是文字这里是文字这里是文字这里是文字这里是文字</p>

三、表单文字禁止选中

<input type="text" readonly unselectable="on" value="点我啊"/>

  当有readonly属性时,不可以聚焦,不可以更改,但还是可以选中的;

  (但 unselectable 这个属性我一直没有弄懂,网上的解释是“在IE浏览器中,当input获得焦点时,点击有unselectable="on"属性的标签时,不会触发onblur事件”,这句话是否准确还有待验证。如果您知道该属性的详细用途,请在下方评论,感激不尽)

  注意:onselectstart 不被 input 和 textarea 标签支持,onselect 事件会在文本框中的文本被选中时发生(被input,textarea)支持,所以onselect="return false;"并不会起作用,可以用CSS方法来阻止表单文字选中,即 user-select:none;

posted @ 2018-03-08 17:15  長风  阅读(1804)  评论(0编辑  收藏  举报