阻止元素被选中及清除选中的方法
2015-01-06 13:29
281 查看
有时候,我们希望阻止用户选中我们指定区域的文字或内容。
举个栗子,有时候用户在一个区域执行频繁的点击操作,一不小心傲娇地点多了,就会选中当前区域的内容。
再举个栗子,制作轮播组件的时候,点击下一页,若点击的快的话,浏览器会识别为双击。
双击的默认效果是选中整片区域,这时候轮播图组件就会被表示忧郁的蓝色幕布盖住,多忧桑啊~
你看,这妹子多赞啊,可是你一紧张就乱点下一张的话,就变成酱紫了:
不过别怕,给这个现代化浏览器说好了咱不要这种忧桑色调就可以了:
可是!可是!不是每个浏览器都可以不忧桑!!!那就只能请脚本大王出山了。
user-select: auto; => 用户可以选中元素中的内容
user-select: none; => 用户不可选中元素中的内容
user-select: text; => 用户可以选中元素中的文字
目前这个 user-select 兼容 Chrome 6+、Firefox、IE 10+、Opera 15+、Safari 3.1+。
需要注意的是,这个 user-select 还带浏览器厂商前缀,意味着她们还是非标准的,将来可能会改变。在生产环境中要慎用。
举个栗子,有时候用户在一个区域执行频繁的点击操作,一不小心傲娇地点多了,就会选中当前区域的内容。
再举个栗子,制作轮播组件的时候,点击下一页,若点击的快的话,浏览器会识别为双击。
双击的默认效果是选中整片区域,这时候轮播图组件就会被表示忧郁的蓝色幕布盖住,多忧桑啊~
你看,这妹子多赞啊,可是你一紧张就乱点下一张的话,就变成酱紫了:
不过别怕,给这个现代化浏览器说好了咱不要这种忧桑色调就可以了:
.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 的样式即可。参考链接
MDN user-select相关文章推荐
- 阻止元素被选中及清除选中的方法
- JS基础篇--JS与CSS阻止元素被选中及清除选中的方法总结
- CSS 清除浮动元素方法 整理
- 清除浮动(闭合浮动元素)方法总结
- ctrl+R刷新checkbox还是被选中,刷新取消选中方法
- 阻止元素被选中
- html页面中阻止用户选中、复制文本,阻止长按保存图片,阻止拖动元素等……
- CSS清除浮动元素方法
- JQuery中的id选择器含有特殊字符时,不能选中dom元素的解决方法
- JQuery中的id选择器含有特殊字符时,不能选中dom元素的解决方法
- 使用jQuery的data方法来为页面中的某个元素存储数据,(获取焦点,清除默认值)
- css清除浮动使父级元素展开的三个方法
- jquery阻止子元素触发父元素的事件的方法
- 关于css清除元素浮动的方法总结(overflow clear floatfix)
- WinForm中如何实现在一组RadioButton中清除选中的方法
- 禁止浏览器中双击选中元素的解决方法
- vector中清除某个元素方法(erase)
- ComboBox SelectionChanged改变SelectedItem MenuItem通过什么方法获得子元素选中项,已解决!
- jQuery获取选中内容及设置元素属性的方法
- Windows8系统如何阻止自动清除缩略图?阻止自动清除缩略图的方法