`

使用user-select禁止网页选择文字

    博客分类:
  • css
阅读更多
http://www.wufangbo.com/css-jin-zhi-xuan-ze/

user-select有两个值:

   none:用户不能选择文本
   text:用户可以选择文本

注意:user-select不是一个W3C的CSS标准属性,浏览器支持的不完整,需要对每种浏览器进行调整。
body{
  -moz-user-select: none; /*火狐*/
  -webkit-user-select: none; /*webkit浏览器*/
  -ms-user-select: none; /*IE10*/
  -khtml-user-select: none; /*早期浏览器*/
  user-select: none;
}


IE6-9还没发现相关的CSS属性,禁止网页选择文字但是文本框中的文字可以选中,使用js实现:

//IE6-9
if (typeof(document.onselectstart) != "undefined") {       
    // IE下禁止元素被选取       
    document.onselectstart = function (event){
        if(event.target.tagName!="INPUT"){
            return false;
        }
    }      
} else {
    // 高级浏览器下禁止元素被选取的变通办法       
    document.onmousedown = function (event){
        if(event.target.tagName!="INPUT"){
            return false;
        }
    }      
    document.onmouseup = function(event){
        if(event.target.tagName!="INPUT"){
            return false;
        }
    }       
}
分享到:
评论

相关推荐

    CSS禁止文字选择user-select应用

    user-select有两个值: none:用户不能选择文本 text:用户可以选择文本 需要注意的是:user-select并不是一个W3C的CSS标准属性,浏览器支持的不完整,需要对每种浏览器进行调整 复制代码代码如下: body{ -moz-...

    -moz-user-select与onselectstart 禁止选择文字的方法

    今天无意中注意到QQ、Hi的密码输入框不能用鼠标选择后一次性删除,只能一个一个的删除,然后,就想js中怎么实现这种效果。

    通过CSS规则禁止选中文字的实现代码

    复制代码代码如下:(-prefix-)user-select: none;(-prefix-)user-select: text;(-prefix-)user-select: all;(-prefix-)user-select: element; 示例 复制代码代码如下:.row-of-icons { -webkit-user-select: none; /*...

    禁止选中文字兼容IE、Chrome、FF等

    代码如下: $(el).attr(‘unselectable’,’on’) .css({‘-moz-user-select’:’-moz-none’, ‘-moz-user-select’:’none’, ‘-o-user-select’:’none’, ‘-khtml-user-select’:’none’, /* you could also ...

    vue实现页面内容禁止选中功能,仅输入框和文本域可选

    -webkit-user-select:none; /*webkit浏览器*/ -khtml-user-select:none; /*早期浏览器*/ -moz-user-select:none;/*火狐*/ -ms-user-select:none; /*IE10*/ user-select:none; } input{ -webkit-user-select:au

    鼠标移动div时禁止选中div中的文字的方法

    这是通过CSS样式来实现的禁止用鼠标选择功能:unselectable为IE准备,onselectstart为Chrome、Safari准备,-moz-user-select是FF的 cssstyle: 复制代码代码如下: html,body{-moz-user-select: none; -khtml-user-...

    利用CSS实现禁止双击选择页面内容的实例展示

    在双击左右箭头,快速切换图片滚动时,会选择附近区域的文字,感觉不是很好,今天在同事在分享时,讲到了这个问题, 试了一下,不错,解决了问题。IE及Chrome下的方法一样,对相应的元素添加onselectstart=”return ...

    js鼠标移动时禁止选中文字

    这是通过CSS样式来实现的禁止用鼠标选择功能: unselectable为IE准备 onselectstart为Chrome、Safari准备 -moz-user-select是FF的 css style:html,body{-moz-user-select: none; -khtml-user-select: none; user-...

    js禁止document element对象选中文本实现代码

    false, 不可选中 function setSelectable(obj, enabled) { if(enabled) { obj.removeAttr(“unselectable”).removeAttr(“onselectstart”).css(“-moz-user-select”, “”).css(“-webkit-user-select”, “”);...

    js 可拖动列表实现代码

    补充一点: 要禁止移动中选中文字,FF可以设置CSS xxxx{-moz-user-select:none;} 其他的浏览器可以设置 XXXX.onselectstart = function(){return false} 一种实现原理就是点击没目标元素之后,创建一个占位元素...

    C++MFC教程

    对于初学者:应该选择一些内容比较全面的书籍,并且书籍中的内容应该以合理的方式安排,在使用该书时可以达到循序渐进的效果,书中的代码要有详细的讲解。尽量买翻译的书,因为这些书一般都比较易懂,而且语言比较...

    精美的js日期控件,可以多个参数设定。

    blocked: ['日 月 年 周(可选)'],blocked: ['3 * *']:表示禁止选择所有年份的所有月份的3号,blocked: ['1-10 3 2010']:表示禁止选择2010年3月1日到10日的日期,blocked: ['1,10 3 2010']:表示禁止选择2010年3月...

    js使用小技巧

    禁止选取()" oncopy="document.selection.empty()" onbeforecopy="return false"onmouseup="document.selection.empty()> 禁止粘贴 地址栏图标 <link rel="Shortcut Icon" href="favicon.ico"> favicon....

    Visual C++ 编程资源大全(英文源码 其它)

    28.zip Case switching 这个宏实现文字的大小写互换(4KB)<END><br>29,29.zip WM_COMMAND user message macro WM_COMMAND用户消息宏(5KB)<END><br>30,30.zip Better caret movement by words 在IDE...

Global site tag (gtag.js) - Google Analytics