JS与CSS阻止元素被选中及清除选中的方法总结
有时候,我们希望阻止用户选中我们指定区域的文字或内容。
举个栗子,有时候用户在一个区域执行频繁的点击操作,一不小心傲娇地点多了,就会选中当前区域的内容。
再举个栗子,制作轮播组件的时候,点击下一页,若点击的快的话,浏览器会识别为双击。
双击的默认效果是选中整片区域,这时候轮播图组件就会被表示忧郁的蓝色幕布盖住,多忧桑啊~
你看,这妹子多赞啊,可是你一紧张就乱点下一张的话,就变成酱紫了:
不过别怕,给这个现代化浏览器说好了咱不要这种忧桑色调就可以了:
.pretty-girl {
-webkit-user-select: none;
}
可是!可是!不是每个浏览器都可以不忧桑!!!那就只能请脚本大王出山了。
阻止选中
有时候,我们需要禁止用户选中一些文本区域,这时候可以直接通过让 onselectstart 事件 return false 来实现。即在body标签中添加如下:
<body 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 还带浏览器厂商前缀,意味着她们还是非标准的,将来可能会改变。在生产环境中要慎用。
清除选中
有时候用户选中文字进行复制后,我们使用手动的方式进行选中的清除。
先来搞懂几个小知识点:
1.获取选中的文字
document.selection.createRange().text; IE9以下使用
window.getSelection().toString(); 其他浏览器使用
$('p').mouseup(function(){
var txt = window.getSelection ? window.getSelection().toString() : document.selection.createRange().text;
alert(txt) ;
})
2.取消处于选中状态的文字
document.selection.empty(); IE9以下使用
window.getSelection().removeAllRanges(); 其他浏览器使用
$('p').mouseup(function(){
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
})
3.使某Dom中的文字处于选中状态
$('.somedom').click(function(){
this.focus();
if(window.getSelection){
var range=document.createRange();
range.selectNodeContents(this);
var selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);
}
else if(document.selection){
//for ie
var range=document.body.createTextRange()
range.moveToElementText(this)
range.select();
}
})
使用 JS 清除选中
function clearSelections () {
if (window.getSelection) {
// 获取选中
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 的样式即可。
扩展onselect 事件
定义与用法:onselect 事件会在文本框中的文本被选中时发生。
语法:
onselect="SomeJavaScriptCode"
其中参数SomeJavaScriptCode为必需。规定该事件发生时执行的 JavaScript。
支持该事件的 HTML 标签:
<input type="text">, <textarea>
支持该事件的 JavaScript 对象:window
实例1
在本例中,当用户试图选择文本框中的文本时,会显示一个对话框:
<form> Select text: <input type="text" value="Hello world!"
onselect="alert('You have selected some of the text.')" />
<br /><br />
Select text: <textarea cols="20" rows="5"
onselect="alert('You have selected some of the text.')">
Hello world!</textarea> </form>
实例2
<input type="text" value="选中的内容" id="text"/>
JS方法:
var text = document.querySelector('#text');
text.addEventListener('select',function(e){
console.log(e.target.value); //选中的内容
})
参考
https://segmentfault.com/a/1190000000638651
JS与CSS阻止元素被选中及清除选中的方法总结的更多相关文章
- js分析 汽_车_之_家 js生成css伪元素 hs_kw44_configUS::before
0.参考 https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-elements https://developer.mozilla.org/ ...
- css 阻止元素中的文本。双击选中
//firefox -moz-user-select: none; //chrome.safari -webkit-user-select: none; //ie -ms-user-select: n ...
- 动态加载js和css
开发过程中经常需要动态加载js和css,今天特意总结了一下常用的方法. 1.动态加载js 方法一:动态加载js文件 // 动态加载js脚本文件 function loadScript(url) { v ...
- css之元素浮动
什么时候用浮动——块级元素一行显示就使用浮动 浮动的特点——让元素脱标不占位置 什么时候清除浮动——父元素没有设置高度:父元素中所有的子元素都设置浮动 清除浮动的方法(掌握): 1.额外标签清除浮动 ...
- 将Microsoft Ajax Minifier集成到VS2013对JS、CSS进行编译时压缩
在网站发布中,一般要将js,css文件压缩减少体积,以减少在HTTP请求中的流量.将Microsoft Ajax Minifier集成到VS2013中就可以对JS.CSS进行编译时压缩. VS2013 ...
- JS魔法堂:阻止元素被选中
一.前言 在为IE5.5~9polyfill HTML5新特性placeholder时需要阻止元素被选中,因此在网上.书上查阅相关资料,记录在此以便日后查阅. 二.IE10+实现方式──CSS3 .u ...
- JS 阻止整个网页的内容被选中
pretty-girl { -webkit-user-select: none; } 可是!可是!不是每个浏览器都可以不忧桑!!!那就只能请脚本大王出山了. 阻止选中 有时候,我们需要禁止用户选中一些 ...
- js如何控制css伪元素内容(before,after)
曾经遇到的问题,在对抗UC浏览器屏蔽需要把内容输出到css 伪元素中输出.有个疑问如何用js控制它.于是在segmentfault提问,如下是对问题的整理: 如何用js控制css伪类after 简单粗 ...
- js阻止元素的默认事件与冒泡事件
嵌套的div元素,如果父级和子元素都绑定了一些事件,那么在点击最内层子元素时可能会触发父级元素的事件,从而带来一定的影响. 1. event.preventDefault(); -- 阻止元素的默认 ...
随机推荐
- [Swift]创建CoreData的两种方式
一.CoreData介绍 CoreData主要分为两部分: 上层是模型层,模型层有NSManagedObjectContext上下文管理着, 底层则是由SQLite实现的持久化部分,通过NSPersi ...
- nginx 日志切割脚本
#!/bin/shLOG_PATH=/home/test/nginx/logsNEW_LOG_PATH=/home/test/nginx/dayslogNGING_PID=$(cat /home/te ...
- 深入分析Java I/O的工作机制 (三)网络I/O的工作机制 很详细
3.网络I/O的工作机制 前言:数据从一台主机(服务端)发送到网络中的另一台主机(客户端)需要经过很多步骤:首先需要有相互沟通的意向.其次要有能够沟通的物理渠道(物理链路):是通过电话,还是直接面对面 ...
- Python - 使用Setuptools进行程序打包
1- Setuptools简介 通过Setuptools可以更方便的创建和发布Python包,特别是那些对其它包具有依赖性的状况: Python打包用户指南(Python Packaging User ...
- 金九银十,史上最强 Java 面试题整理。
以下会重新整理所有 Java 系列面试题答案.及各大互联网公司的面试经验,会从以下几个方面汇总,本文会长期更新. Java 面试篇 史上最全 Java 面试题,带全部答案 史上最全 69 道 Spri ...
- 3,linux入门到上手-文件权限管理与配置
linux入门-文件权限管理与配置 一.关于linux的操作命令一般格式如下: 1,一行指令中第一个输入的部分绝对是"指令(command)"或"可可执行文件案(例如批次 ...
- python 调用c语言函数
虽然python是万能的,但是对于某些特殊功能,需要c语言才能完成.这样,就需要用python来调用c的代码了 具体流程: c编写相关函数 ,编译成库 然后在python中加载这些库,指定调用函数. ...
- 项目总结一:情感分类项目(emojify)
一.Emojifier-V1 模型 1. 模型 (1)前向传播过程: (2)损失函数:计算the cross-entropy cost (3)反向传播过程:计算dW,db dz = a - Y_oh[ ...
- vue项目 使用Hbuilder打包app 设置沉浸式状态栏
使用 Hbuilder新建好移动app项目后,mainfest.json这个文件里的 plus里设置 statusbar ..... "plus": { "statusb ...
- myeclipse-common 找不到
1. 首先打开myeclipse 2. 找到myeclipse的顶部导航栏"myclipse"选项然后打开"Installation Summary..."然后 ...