找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
热搜: 文档 工具 设计
查看: 159|回复: 0

css控制页面文字不能被选中user-select:none;

[复制链接]

75

主题

15

回帖

953

积分

管理员

湘南小侠

精华
0
热心
2
听众
1
威望
4
贡献
589
违规
0
书币
531
注册时间
2019-11-4

忠诚勋章巡查标识

QQ
发表于 2020-9-6 02:42 | 显示全部楼层 |阅读模式
现象:html中可能有些地方不想让用户复制文字,或是用a标签做了个点击按钮,点快的时候文字会被选中,很丑,这个时候可以使用下面的方案禁止文字选中。

原因:鼠标点快了文字会被选中。

解决方案:不同的浏览器设置的内容不一样,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;
}


user-select有2个值(none表示不能选中文本,text表示可以选择文本)

IE6-9还没发现相关的CSS属性

[HTML] 纯文本查看 复制代码
//IE6-9

document.body.onselectstart=document.body.οndrag=function(){
returnfalse;
}




举个栗子:在做APP时经常用到下面的~~

[HTML] 纯文本查看 复制代码
<style type="text/css">
body {
	-moz-user-select: none;
	-webkit-user-select: none;
	cursor: default
}

html {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-tap-highlight-color: rgba(0,0,0,0)
}

img {
	-webkit-touch-callout: none;
	-webkit-user-select: none
}</style>


[CSS] 纯文本查看 复制代码
html,body{
      -webkit-touch-callout:none ;
      -webkit-text-size-adjust:none ;
      -webkit-tap-highlight-color:transparent ;
      -webkit-user-select:none ;
}
天之道,损有余而补不足.人之道则不然,损不足以奉有余.孰能有余以奉天下,唯有道者.
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则 需要先绑定手机号


免责声明:
本站所发布的第三方软件及资源(包括但不仅限于文字/图片/音频/视频等仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢某程序或某个资源,请支持正版软件及版权方利益,注册或购买,得到更好的正版服务。如有侵权请邮件与我们联系处理。

Mail To: admin@cdsy.xyz

QQ|Archiver|手机版|小黑屋|城东书院 ( 湘ICP备19021508号-1|湘公网安备 43102202000103号 )

GMT+8, 2024-4-26 07:18 , Processed in 0.052777 second(s), 31 queries .

Powered by Discuz! CDSY.XYZ

Copyright © 2019-2023, Tencent Cloud.

快速回复 返回顶部 返回列表