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 ievar 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 事件会在文本框中的文本被选中时发生。
语法:
οnselect="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); //选中的内容 })
参考
MDN user-select
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/ ...
- js如何删除html元素的属性值,javascript 三种方法实现获得和设置以及移除元素属性...
以下面的html为例 百度 1.通过HTMLElement类型(对象)的属性获得和设置元素特性 var div = document.getElementById("myDiv") ...
- JS操作CSS伪元素
参考链接: segmentfault MDN CSSStyleSheet QQ群闲逛,看到有人说js不能操作css的伪元素样式, 之前没有遇到过应用场景,我当时想到的就是操作通过操作class来控制样 ...
- 如何修改css伪元素的样式
首先说一下变成思想,众所周知,css伪元素是不可以修改的,首先你查找他的元素就很困难,不知道怎么查找的可以看一下我的另一篇原生js查看css伪元素属性,那么我们应该怎么修改呢 . 其实换一种思维事情就 ...
- js基础总结——js 获取元素节点、js 绑定onclick事件、js 获取属性 修改属性值、js 获取子元素、js 改变css样式
参考书籍:<JavaScript DOM编程艺术 第2版> 本博客代码的测试页面是:https://www.layui.com/ js dom操作 js 获取元素节点 一份document ...
- js、css分别实现元素水平垂直居中
js实现元素水平垂直居中.css实现元素水平垂直居中 css实现元素水平垂直居中[4行代码] js实现元素水平垂直居中[弄巧成拙] css实现元素水平垂直居中[4行代码] #div{top:50%;l ...
- css伪元素实现选中效果【打勾效果】
css伪元素实现选中效果 .item{border: 1px solid #00a9ff;position: relative;&:after {position: absolute;cont ...
- css隐藏元素的几种方法与区别
css隐藏元素的几种方法与区别 一:display:none;隐藏不占位 display 除了不能加入 CSS3 动画豪华大餐之外,基本效果卓越,没什么让人诟病的地方.二:position:absol ...
- css修改select选择框option被选中的背景颜色_这 16 个 CSS 伪类,助你提升布局效率!
作者:Chidume Nnamdi 译者:前端小智 来源:mediuum 大家都说简历没项目写,我就帮大家找了一个项目,还附赠[搭建教程]. css 伪类是用于向某些选择器添加特殊的效果,是动态的,指 ...
最新文章
- 个人站点渲染和跳转过滤功能
- Java:Object.hashCode()和System.identityHashCode()的区别
- SpringSecurity权限表达式
- GPU Gems 3
- 计算机作文点评,未来的电脑作文评语
- 学计算机的男孩子怎么追女孩子,男孩子追女孩子的套路,原来有这么多,快来学一学...
- delphi初级教程之delphi断点调试一
- 每周.NET前沿技术文章摘要(2017-05-24)
- Java中使用Socket实现服务器端和客户端通讯
- php+使用go编译,golang如何编译
- spring的依赖、注入、容器、装配的理解
- SpringBoot 系列
- adapter中的数据错误原因和解决方案
- mate 10android o主题,懒萌可爱皮卡丘全局手机主题-适配华为EMUI10.0
- Extjs6 自定义事件
- 【中国农业银行风险管理部总经理 田继敏】筑牢IT风险第二道防线 保障银行信息科技安全
- 解决Oracle安装过程中出现的缺少KEY_XE.reg文件的问题
- 中级程序员晋升高级程序员,只差这几个技能
- Ansible—— 29. 通过set_fact模块定义变量
- 西门子杯企业命题”钞包分拣装箱系统”演示视频
热门文章
- python语言if语句-Python if else语句详解
- Real-Time-Voice-Cloning的使用教程
- Linux在后台运行python程序、脚本程序、可执行程序等,关闭终端仍可保持程序运行
- 用PIL读取保存图片错误 :OSError: cannot write mode RGBA as JPEG
- lua学习笔记之日期时间
- grpc在java中使用
- Java多线程编程核心技术笔记
- LeetCode Longest Substring with At Least K Repeating Characters(递归)
- hduoj4092 Yummy Triangular Pizza(打表)
- UVa307 - Sticks(DFS+剪枝)