JS 阻止整个网页的内容被选中
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 阻止整个网页的内容被选中的更多相关文章
- 使用Teleport Pro离线下载网页所有内容
在学习生活中,碰到网页中内容太多,如何讲其保存到本地,已方便随时查看呢? 使用Teleport Pro就可以解决问题: 首先下载Teleport Pro V1.54 汉化绿色版的,解压完之后 ...
- WOW.js轻松为网页添加动画切入效果
由于坐忘的需要,经常会有部分功能用的很多,做起来又很繁琐,所以插件也就应运而生了.个人感觉正式js强大的可植入性, 才使他如此的使用火爆,反正博主是特别喜欢这一点 Y(^o^)Y~ . 今天就和大家 ...
- 为什么不能用 JS 获取剪贴板上的内容?
为什么不能用 JS 获取剪贴板上的内容? 为什么不能用 JS 获取剪贴板上的内容? 发一串口令给朋友朋友复制这串口令,然后访问你的网站你在网站上用 JS 读取朋友剪贴板上的口令根据不同的口令,显示不同 ...
- Selenium/HtmlUnit设置代理获取JS生成的网页
通常我们使用Java提供的HttpURLConnection或者Apache的HttpClient获取的网页源代码都是直观可见的,其代码的内容和通过浏览器右键网页->点击查看网页源代码的内容一致 ...
- 输出JS代码中的变量内容
一. 输出JS代码中的变量内容 1. 可以直接以提示框的形式输出 alert("输出的内容"); 2. 可以输出到网页的某个位置 a. 在显示输出的位置放一个标签 <a id ...
- 不支持javascript的浏览器将JS脚本显示为页面内容
不支持javascript的浏览器将JS脚本显示为页面内容.为了防止这种情况发生,您可以使用这样的HTML注释标记:<html ><体><script type=“tex ...
- JS 弹出网页 (不显示地址栏,工具栏) 网页去掉地址栏
JS 弹出网页 (不显示地址栏,工具栏) 网页去掉地址栏 window.open()支持环境: JavaScript1.0+/JScript1.0+/Nav2+/IE3+/Opera3+ 基本语法: ...
- JS点击子元素不触发父元素点击事件(js阻止冒泡)
js阻止冒泡 <html> <title></title> <head> <meta charset="utf-8"> ...
- handlebars.js 用 <br>替换掉 内容的换行符
handlebars.js 用 <br>替换掉 内容的换行符 JS: Handlebars.registerHelper('breaklines', function(text) { te ...
随机推荐
- windows下使用命令查看端口占用情况
使用下面的命令查看端口占用情况: 比如查看3000端口的占用情况 netstat -ano|findstr 3000 运行后,结果如下: 可以看到进程号为9692的占用了该端口,使用下面的命令查看是哪 ...
- this和$(this)
this指的是javascript对象而$(this)就是就jquery对象 jQuery.prototype.test=function(){ this.css("color", ...
- Docker 第三篇--构建Image
什么是 docker Image 和container? 我们先来看看官网是怎么说的. Docker Engine provides the core Docker technology that e ...
- OpenGL的状态机理解
OpenGL是一种状态机模式,比如你用glEnable打开一个状态,在以后的绘图中将一直保留并应用这个状态,除非你调用glDisable及同类函数来改变该状态或程序退出.例如当前颜色是一个状态变量,可 ...
- STURTS2 HELLOWORLD
4. <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE struts PUBLIC " ...
- CentOS 7安装SVN以及高版本SVN
安装 CentOS 7 下yum命令即可方便的完成安装 $ sudo yum install subversion 测试安装是否成功: $ svnserve --version 建立版本库 创建svn ...
- readelf -s 命令‘symbol’名字显示不全
GCC编译出来的object(目标文件)getPon.o,在链接时(ld)报了一个错误说找不到一个函数(undefined reference to identifier devCtl_getEthe ...
- sql语句实现隐藏手机号码中间四位的方法
1、select REPLACE(mobile,SUBSTR(mobile,4,4), '****') as mobile from tableName 2、select INSERT(mobile, ...
- SQL语句获取数据库中的表主键,自增列,所有列
SQL语句获取数据库中的表主键,自增列,所有列 获取表主键 1:SELECT TABLE_NAME,COLUMN_NAME FROM INFORMATION_SCHEMA.KEY_COLUMN_U ...
- 基于 Consul 的 Docker Swarm 服务发现
Docker 是一种新型的虚拟化技术,它的目标在于实现轻量级操作系统的虚拟化.相比传统的虚拟化方案,Docker 虚拟化技术有一些很明显的优势:启动容器的速度明显快于传统虚拟化技术,同时创建一台虚拟机 ...