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

一、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)支持,所以οnselect="return false;"并不会起作用,可以用CSS方法来阻止表单文字选中,即 user-select:none;

转载于:https://www.cnblogs.com/Kuro-P/p/8529621.html

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值