`

使用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;
        }
    }       
}
分享到:
评论

相关推荐

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

    本文将详细介绍如何使用`-moz-user-select`和`onselectstart`属性来禁止文本选择,并讨论它们在不同浏览器中的兼容性和应用。 `-moz-user-select`是Mozilla Firefox浏览器特有的CSS属性,用于控制元素是否允许用户...

    css 让文字不被选中之-moz-user-select 属性介绍

    `-moz-user-select` 是一个 Mozilla 扩展的 CSS 属性,主要用于控制元素是否允许用户选择其内容。这个属性在 Firefox 浏览器及其早期版本的 Netscape 中得到支持,用于防止用户通过鼠标或键盘选取文本,这在某些情况...

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

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

    解除网页文字复制限制

    2. **CSS禁用选择**:通过设置CSS属性`user-select`为`none`,可以阻止用户选中文本。例如:`* { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }` 3. **框架和...

    禁止复制网页指定区域的文字.rar

    通过设置`user-select`属性为`none`,可以防止用户选择特定区域的文本: ```css #yourElementId { user-select: none; -webkit-user-select: none; /* 对于Chrome和Safari */ -moz-user-select: none; /* 对于...

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

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

    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

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

    总的来说,禁止用户通过鼠标选择文字是通过CSS样式来实现的,特别是使用`user-select`属性。同时,我们可以通过JavaScript监听和处理鼠标事件,以在特定情况下动态控制文本选择的行为。然而,应当谨慎使用这样的功能...

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

    标题中的“利用CSS实现禁止双击选择页面内容的实例...通过控制`-ms-user-select`属性,开发者可以精细地管理用户在网页上的文本选择行为,以提供更好的用户体验。特别是在触摸设备上,防止误触造成的文本选择尤为重要。

    禁止选中文字兼容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 ...

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

    为了解决这个问题,我们可以采用CSS和JavaScript相结合的方式来禁止选中`div`中的文字。 首先,我们来看如何通过CSS来实现这一功能。CSS提供了几个特定的属性,针对不同浏览器的兼容性,可以阻止用户选中文本。这些...

    网页防复制代码

    5. 使用图片代替文字:对于关键内容,可以选择将其转换为图片,这样就无法通过复制文本的方式获取。 6. 服务器端处理:在服务器端对请求进行检测,如果发现有大量内容被快速复制,可以采取拦截或者限制访问的策略。...

    jquery防windows系统选中图标效果

    - `user-select`属性:这是一个非标准但广泛支持的CSS属性,用于控制元素是否可以被用户选中。值`none`表示禁止选中。 以下是一个简单的示例代码,展示如何使用jQuery实现防选中效果: ```html <!DOCTYPE html> ...

    HTML5对手机页面长按会粘贴复制禁用的解决方法

    而其他 `-webkit-user-select`, `-khtml-user-select`, `-moz-user-select`, `-ms-user-select` 和 `user-select` 属性则是针对不同浏览器的兼容写法,它们共同作用于阻止用户选择网页上的文本。 然而,这样做可能...

Global site tag (gtag.js) - Google Analytics