禁止用户选中网页中文字-兼容处理其他浏览器

全局样式里面添加如下class样式,在需要的地方直接添加class就可以了

/*也可以设置成 * 选取全部*/
.no-select {
	-webkit-touch-callout: none;
	/*系统默认菜单被禁用 iOS Safari*/
	-webkit-user-select: none;
	/*webkit浏览器 Chrome/Safari/Opera*/
	-khtml-user-select: none;
	/*早期浏览器 Konqueror*/
	-moz-user-select: none;
	/*火狐 Firefox*/
	-ms-user-select: none;
	/*IE10 Internet Explorer/Edge*/
	user-select: none;
	/* Non-prefixed version, currently not supported by any browser */
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.no-select {
				-webkit-touch-callout: none;
				/*系统默认菜单被禁用 iOS Safari*/
				-webkit-user-select: none;
				/*webkit浏览器 Chrome/Safari/Opera*/
				-khtml-user-select: none;
				/*早期浏览器 Konqueror*/
				-moz-user-select: none;
				/*火狐 Firefox*/
				-ms-user-select: none;
				/*IE10 Internet Explorer/Edge*/
				user-select: none;
				/* Non-prefixed version, currently not supported by any browser */
			}
		</style>
	</head>
	<body>
		<p>厉害哈哈哈哈哈哈</p>
		<p class="no-select">厉害哈哈哈哈哈哈</p>
		<p class="no-select">厉害哈哈哈哈哈哈</p>
		<p class="no-select">厉害哈哈哈哈哈哈</p>
		<img src="https://himg.bdimg.com/sys/portraitn/item/ee81e69caae5bf85e9a1bde59bba443e" class="no-select" οndragstart="return false">
	</body>
</html>

IE < 10 和Opera < 15中我们需要在需要禁止选中的元素上面添加一个属性

unselectable=“on”,否则可能不会生效

最新的浏览器如果不是非得兼容一些老的浏览器也可以不加

 

 

posted @   JackieDYH  阅读(17)  评论(0编辑  收藏  举报  
编辑推荐:
· AI与.NET技术实操系列:基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
阅读排行:
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 25岁的心里话
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 按钮权限的设计及实现
点击右上角即可分享
微信分享提示