pretty-girl {
-webkit-user-select: none;
}

可是!可是!不是每个浏览器都可以不忧桑!!!那就只能请脚本大王出山了。

阻止选中

有时候,我们需要禁止用户选中一些文本区域,这时候可以直接通过让 onselectstart 事件 return false 来实现。

使用 JS 阻止整个网页的内容被选中

document.body.onselectstart = function () {
return false;
}; // 或
document.body.onmousedown = function () {
return false;
}

阻止特定区域的内容被选中

var elem = document.getElementById('elemId');
elem.onselectstart = function () {
return false;
};

使用 CSS 控制样式阻止内容被选中

仅支持非 IE10 以下的浏览器。IE9 以下请使用 onselectstart=”return false;” 的方式来实现。

.unselect {
-webkit-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
-ms-user-select: none; /* 以下两个属性目前并未支持,写在这里为了减少风险 */
-o-user-select: none;
user-select: none;
}

user-select: auto; => 用户可以选中元素中的内容

user-select: none; => 用户不可选中元素中的内容

user-select: text; => 用户可以选中元素中的文字

目前这个 user-select 兼容 Chrome 6+、Firefox、IE 10+、Opera 15+、Safari 3.1+。

需要注意的是,这个 user-select 还带浏览器厂商前缀,意味着她们还是非标准的,将来可能会改变。在生产环境中要慎用。

清除选中

有时候用户选中文字进行复制后,我们使用手动的方式进行选中的清除。

使用 JS 清除选中

function clearSelections () {
if (window.getSelector) {
// 获取选中
var selection = window.getSelection();
// 清除选中
selection.removeAllRanges();
} else if (document.selection && document.selection.empty) {
// 兼容 IE8 以下,但 IE9+ 以上同样可用
document.selection.empty();
// 或使用 clear() 方法
// document.selection.clear();
}
}

使用 CSS 清除选中

不考虑低版本 IE 的情况下,我们简单给选中元素添加以上 .unselect 的样式即可。

JS 阻止整个网页的内容被选中的更多相关文章

  1. 使用Teleport Pro离线下载网页所有内容

    在学习生活中,碰到网页中内容太多,如何讲其保存到本地,已方便随时查看呢? 使用Teleport Pro就可以解决问题:     首先下载Teleport Pro V1.54 汉化绿色版的,解压完之后 ...

  2. WOW.js轻松为网页添加动画切入效果

    由于坐忘的需要,经常会有部分功能用的很多,做起来又很繁琐,所以插件也就应运而生了.个人感觉正式js强大的可植入性, 才使他如此的使用火爆,反正博主是特别喜欢这一点  Y(^o^)Y~ . 今天就和大家 ...

  3. 为什么不能用 JS 获取剪贴板上的内容?

    为什么不能用 JS 获取剪贴板上的内容? 为什么不能用 JS 获取剪贴板上的内容? 发一串口令给朋友朋友复制这串口令,然后访问你的网站你在网站上用 JS 读取朋友剪贴板上的口令根据不同的口令,显示不同 ...

  4. Selenium/HtmlUnit设置代理获取JS生成的网页

    通常我们使用Java提供的HttpURLConnection或者Apache的HttpClient获取的网页源代码都是直观可见的,其代码的内容和通过浏览器右键网页->点击查看网页源代码的内容一致 ...

  5. 输出JS代码中的变量内容

    一. 输出JS代码中的变量内容 1. 可以直接以提示框的形式输出 alert("输出的内容"); 2. 可以输出到网页的某个位置 a. 在显示输出的位置放一个标签 <a id ...

  6. 不支持javascript的浏览器将JS脚本显示为页面内容

    不支持javascript的浏览器将JS脚本显示为页面内容.为了防止这种情况发生,您可以使用这样的HTML注释标记:<html ><体><script type=“tex ...

  7. JS 弹出网页 (不显示地址栏,工具栏) 网页去掉地址栏

    JS 弹出网页 (不显示地址栏,工具栏) 网页去掉地址栏 window.open()支持环境: JavaScript1.0+/JScript1.0+/Nav2+/IE3+/Opera3+ 基本语法: ...

  8. JS点击子元素不触发父元素点击事件(js阻止冒泡)

    js阻止冒泡 <html> <title></title> <head> <meta charset="utf-8"> ...

  9. handlebars.js 用 <br>替换掉 内容的换行符

    handlebars.js 用 <br>替换掉 内容的换行符 JS: Handlebars.registerHelper('breaklines', function(text) { te ...

随机推荐

  1. windows下使用命令查看端口占用情况

    使用下面的命令查看端口占用情况: 比如查看3000端口的占用情况 netstat -ano|findstr 3000 运行后,结果如下: 可以看到进程号为9692的占用了该端口,使用下面的命令查看是哪 ...

  2. this和$(this)

    this指的是javascript对象而$(this)就是就jquery对象 jQuery.prototype.test=function(){ this.css("color", ...

  3. Docker 第三篇--构建Image

    什么是 docker Image 和container? 我们先来看看官网是怎么说的. Docker Engine provides the core Docker technology that e ...

  4. OpenGL的状态机理解

    OpenGL是一种状态机模式,比如你用glEnable打开一个状态,在以后的绘图中将一直保留并应用这个状态,除非你调用glDisable及同类函数来改变该状态或程序退出.例如当前颜色是一个状态变量,可 ...

  5. STURTS2 HELLOWORLD

    4. <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE struts PUBLIC " ...

  6. CentOS 7安装SVN以及高版本SVN

    安装 CentOS 7 下yum命令即可方便的完成安装 $ sudo yum install subversion 测试安装是否成功: $ svnserve --version 建立版本库 创建svn ...

  7. readelf -s 命令‘symbol’名字显示不全

    GCC编译出来的object(目标文件)getPon.o,在链接时(ld)报了一个错误说找不到一个函数(undefined reference to identifier devCtl_getEthe ...

  8. sql语句实现隐藏手机号码中间四位的方法

    1、select REPLACE(mobile,SUBSTR(mobile,4,4), '****') as mobile from tableName 2、select INSERT(mobile, ...

  9. SQL语句获取数据库中的表主键,自增列,所有列

    SQL语句获取数据库中的表主键,自增列,所有列   获取表主键 1:SELECT TABLE_NAME,COLUMN_NAME FROM INFORMATION_SCHEMA.KEY_COLUMN_U ...

  10. 基于 Consul 的 Docker Swarm 服务发现

    Docker 是一种新型的虚拟化技术,它的目标在于实现轻量级操作系统的虚拟化.相比传统的虚拟化方案,Docker 虚拟化技术有一些很明显的优势:启动容器的速度明显快于传统虚拟化技术,同时创建一台虚拟机 ...