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


    在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;"

  • 相关阅读:
    剪绳子
    一步一步创建聊天程序2-利用epoll来创建简单的聊天室
    一步一步创建聊天程序1-利用进程和共享内存来创建简易聊天程序
    重写二路归并排序
    数据结构中的参见排序算法的实现,以及时间复杂度和稳定性的分析(2)
    数据结构中的参见排序算法的实现,以及时间复杂度和稳定性的分析(1)
    fork函数的一些小结
    LRU的实现(使用list)
    关于一道fork生成子进程的题目
    【转载】C++编译过程
  • 原文地址:https://www.cnblogs.com/liuyanxia/p/5619391.html
Copyright © 2020-2023  润新知