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. [ios2]苹果iOS 5限制应用本地存储问题 【转】

    苹果 iOS 5 系统增加了一个新的机制——在设备容量空间不足的情况下自动清除高速缓存文件或临时目录的内容.这意味着,如果你设备的容量快到极限了,应用存储的很多离线内容,包括文章.杂志.图书.漫画以及 ...

  2. 软件各种版本的含义!例如RC,M,GA等等

    RC版本   RC:(Release Candidate)   Candidate是候选人的意思,用在软件上就是候选版本.Release是发行.发布的意思.Release.Candidate.就是发行 ...

  3. .net在网页中生成二维码和条形码

    二维码: 1.下载ThoughtWorks.QRCode.dll文件 2.创建Web项目,添加引用刚才下载的文件 3.在项目中添加aspx窗体,编写代码如下 <%@ Page Language= ...

  4. 编写高性能SQL的注意事项

    在数据库部分,对数据库应用性能改进来说,需要重点关注应用程序,在查询设计和索引策略等方面进行优化,甚至可以把数据库查询效率提高数百倍,在其他方面的优化努力,其效果就没有这么明显(见下图).本文重点描述 ...

  5. java的return区别

    return ;和return null的区别在于:前者当方法返回值为void时候,return ; 跳出方法. 后者当方法的返回值为object对象时,return null,跳出方法,返回值为空值 ...

  6. 2. SpringMVC 上传文件操作

    1.创建java web项目:SpringMVCUploadDownFile 2.在项目的WebRoot下的WEB-INF的lib包下添加如下jar文件 com.springsource.com.mc ...

  7. mybatis学习笔记二(接口注解)

    直接上代码,全部在代码里讲解. 1.实体类 package com.home.entity; /** * 此类是:user实体类 * @author hpc * @2017年1月10日下午9:36:5 ...

  8. 我理解的session和cookie

    tomcat管理session 理解tomcat是如何生成session的. 当用户请求到web资源有request.getSession()这段代码的时候,request首先会对请求的url判读是否 ...

  9. iOS-延迟操作方法总结

    在实际应用中,有时候我们会需要延时执行某些操作,所以我们这里总结了四种延迟操作的方法,并简要分析了每种方法的异同. NSObject的相关方法 第一种方法是使用NSObject类的performSel ...

  10. HTML,CSS,JS,JQ

    CSS: <style> <!--属性选择器--> .container input[type="text"][name="txt"]{ ...