CSS禁止文字选择user-select应用
2016-01-21 13:54
483 查看
user-select有两个值:
none:用户不能选择文本
text:用户可以选择文本
需要注意的是:user-select并不是一个W3C的CSS标准属性,浏览器支持的不完整,需要对每种浏览器进行调整
代码如下:
body{
-moz-user-select: none; /*火狐*/
-webkit-user-select: none; /*webkit浏览器*/
-ms-user-select: none; /*IE10*/
-khtml-user-select: none; /*早期浏览器*/
user-select: none;
}
IE6-9还没发现相关的CSS属性
代码如下:
//IE6-9
document.body.onselectstart = document.body.ondrag = function(){
return false;
}
注意:
-webkit-user-select: none; -khtml-user-select: none; 都会引起windows上的Safari <input />不能获取焦点
可以使用屏蔽 mousedown 事件解决,chrome也可以使用此方法
总结:
屏蔽用户选中某个节点文本用以下两个方法就可以了
屏蔽 mousedown 事件可以解决除IE6-9以外的所有浏览器选中问题
onselectstart ="return false;" //解决E6-9选中问题
none:用户不能选择文本
text:用户可以选择文本
需要注意的是:user-select并不是一个W3C的CSS标准属性,浏览器支持的不完整,需要对每种浏览器进行调整
代码如下:
body{
-moz-user-select: none; /*火狐*/
-webkit-user-select: none; /*webkit浏览器*/
-ms-user-select: none; /*IE10*/
-khtml-user-select: none; /*早期浏览器*/
user-select: none;
}
IE6-9还没发现相关的CSS属性
代码如下:
//IE6-9
document.body.onselectstart = document.body.ondrag = function(){
return false;
}
注意:
-webkit-user-select: none; -khtml-user-select: none; 都会引起windows上的Safari <input />不能获取焦点
可以使用屏蔽 mousedown 事件解决,chrome也可以使用此方法
总结:
屏蔽用户选中某个节点文本用以下两个方法就可以了
屏蔽 mousedown 事件可以解决除IE6-9以外的所有浏览器选中问题
onselectstart ="return false;" //解决E6-9选中问题
相关文章推荐
- css样式中font属性的简写规则
- HTML+CSS慕课网学习总结(一)
- css 浏览器兼容性hack写法
- AlertDialog对话框的几种样式
- 动态加载JS和CSS
- css中filter:alpha透明度使用小结,兼容IE、火狐
- 修改radio、checkbox、select默认样式的方法
- 边距重叠问题
- 纯css实现下拉菜单
- View 样式(背景色、圆角、描边、等等)
- css选择器详解
- CSS控制显示超出部分,用省略号显示
- 隐性改变display类型
- 使用css方法,实现文字字符串截断处理
- CSS垂直居中
- CSS水平居中
- css中的浮动
- Relative与Absolute组合使用
- CSS元素分类与布局模型
- Qt浅谈之四十一QLineEdit的新样式和补全历史记录