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

html的标签中 unselectable=on 属性的作用的更多相关文章

  1. meta标签中的http-equiv属性使用介绍(转载)

    meta是html语言head区的一个辅助性标签.也许你认为这些代码可有可无.其实如果你能够用好meta标签,会给你带来意想不到的效果,meta标签的作用有:搜索引擎优化(SEO),定义页面使用语言, ...

  2. <c:out>标签中的escapeXML属性

    <c:out>标签中的escapeXML属性 在<c:out>中,escapeXML属性默认为true. 当设置escapeXML的属性为true时,将value中的值以字符串 ...

  3. spring property标签中的 ref属性和ref 标签有什么不同? 如下:<property name="a" ref="b" />

    spring property标签中的 ref属性和ref 标签有什么不同? 如下:<property name="a" ref="b" /> sp ...

  4. [转]spring property标签中的 ref属性和ref 标签有什么不同

    spring property标签中的 ref属性和ref 标签有什么不同? 如下:<property name="a" ref="b" /> sp ...

  5. 关于meta标签中的http-equiv属性使用介绍

    关于meta标签中的http-equiv属性使用介绍 meta是html语言head区的一个辅助性标签.也许你认为这些代码可有可无.其实如果你能够用好meta标签,会给你带来意想不到的效果,meta标 ...

  6. 【转】meta标签中的http-equiv属性使用介绍

    meta是html语言head区的一个辅助性标签.也许你认为这些代码可有可无.其实如果你能够用好meta标签,会给你带来意想不到的效果,meta标签的作用有:搜索引擎优化(SEO),定义页面使用语言, ...

  7. 标签中的name属性和ID属性的区别

    标签中的name属性和ID属性的区别 2018年05月13日 10:17:44 tssit 阅读数:760   编程这么久,细想了一下,发现这个问题还不是很清楚,汗!看了几篇文章,整理了一下,分享下! ...

  8. Meta标签中的format-detection属性及含义(转)

    一.Meta标签中的format-detection属性及含义 意为:格式检测 或许你会有这样的经历:当你在制作手机端的页面中,点击了没有加任何链接的格式的数字时,这时手机会进行自动拔号提示操作! 禁 ...

  9. C++ CEF 浏览器中显示 Tooltip(标签中的 title 属性)

    在 Windows 中将 CEF 集成到 C++ 客户端以后,默认是无法显示 tooltip 的,比如图片标签中的 title 属性. 实现的方式其实很简单,按下面的步骤操作就可以: 创建一个文本文件 ...

随机推荐

  1. JAVA NIO 类库的异步通信框架netty和mina

    Netty 和 Mina 我究竟该选择哪个? 根据我的经验,无论选择哪个,都是个正确的选择.两者各有千秋,Netty 在内存管理方面更胜一筹,综合性能也更优.但是,API 变更的管理和兼容性做的不是太 ...

  2. Xamarin.Android真机调试时闪退解决办法

    项目->属性->Android Options,Packaging页签 去掉 Use Shared Runtime可解决

  3. typedef typedef struct的使用

    typedef通常情况用于声明结构体之类的 1,定义某些便于记忆的结构体或者使现有的类型看上去更加整齐,比如后来因为经常使用而被添加进入c/c++标准头文件的stdint.h typedef sign ...

  4. [iOS 多线程 & 网络 - 2.3] - 解析xml

    A.XML基本知识 1.xml概念 什么是XML全称是Extensible Markup Language,译作“可扩展标记语言”跟JSON一样,也是常用的一种用于交互的数据格式一般也叫XML文档(X ...

  5. MSSQL导入数据时,出现“无法截断表 因为表正由Foreign key引用”错误

    * 错误 0xc002f210: 准备 SQL 任务: 执行查询“TRUNCATE TABLE [dsc100552_db].[dbo].[ALV_SalesBigClass] ”失败,错误如下:“无 ...

  6. 树莓派加入定时任务实现花生壳定时重启(linux的定时任务)

    由于花生壳在linux下不稳定,联系开机一个星期左右会挂掉,所以要使用定时任务实现每小时刷新一次/启动一次. 使用的是linux下的定时任务crontab去实现. 实现步骤: 1.编辑/etc/cro ...

  7. Nexus搭建Manven

    Nexus相当于中转服务器,减轻网络的负载,加速项目搭建的进程 1.下载地址:http://www.sonatype.org/nexus/go 2.下载的是zip包,解压后进入D:\nexus-2.8 ...

  8. mac ide

    常用IDE xcode sublime text eclipse xampp + phpstorm sql客户端:sequel pro 虚拟机:parallels desktop sftp客户端:Cy ...

  9. 【不积跬步,无以致千里】关闭631端口cups打印服务和8009端口ajp

    国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html内部邀请码:C8E245J (不写邀请码,没有现金送)国内私 ...

  10. Android布局优化之include、merge、ViewStub的使用

    本文针对include.merge.ViewStub三个标签如何在布局复用.有效减少布局层级以及如何可以按需加载三个方面进行介绍的. 复用布局可以帮助我们创建一些可以重复使用的复杂布局.这种方式也意味 ...