html的标签中 unselectable=on 属性的作用

本文介绍了如何在不同浏览器中实现网页内容不可选中的方法,包括IE下的unselectable属性及onselectstart事件,Firefox下的-moz-user-select属性,以及Chrome下的-webkit-user-select属性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

 

在IE浏览器中,当input获得焦点时,点击有unselectable="on"属性的标签时,不会触发onblur事件。

加上该属性的元素不能被选中。


< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
< html>     
     < head>
          < title>html的标签unselectable=on属性的作用</title>
         < meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    < /head>
  <body>
  <div>
   < p><input id="txt" type="text"/></p>
 < p><span unselectable="on">unselectable="on"</span></p>
 < p><span unselectable="">span测试2 unselectable=""</span></p>
 
 < p><div unselectable="on">div测试1 unselectable="on"</div></p>
 < p><div unselectable="">div测试2 unselectable=""</div></p>
  </body>
< /html>
< script language="javascript" type="text/javascript">
    (function () {
        var txt = document.getElementById("txt");
        txt.onblur = function () { alert('失去焦点了'); }
    })();
< /script>

 

在IE下给DIV设置unselectable与onselectstart属性,可以让div的内容不能选中,这个功能在很多情况下,非常有用,但是他的bug太明显,

直接使用一个DIV是可以的,比如:

  1. <div unselectable="on" onselectstart="return false;">不能选中的内容</div>  


但是假如在这个DIV前面在出现一个普通的DIV,那就有问题了,比如:

  1. <div>普通DIV<div>  
  2. <div unselectable="on" onselectstart="return false;">从前面一个DIV开始选,就可以选中本部分内容,只有从该DIV结束部分才能不选中</div

目前我还没找到很好的解决方案,要么在body里用onselectstart="return false;",但是那会导致整个页面都无法选中;或者在所有div或者类似DIV的容器里都要设置onselectstart="return false;",才能彻底解决。


Firefox下的解决方案:

style="-moz-user-select:none;" 

Chrome下的解决方案:

style="-webkit-user-select:none;"

 

转载于:https://www.cnblogs.com/liuyanxia/p/5619391.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值