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

全局样式里面添加如下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 @ 2020-11-09 13:46  JackieDYH  阅读(32)  评论(0)    收藏  举报  来源