有时候,我们需要使页面内容不可选择。首先想到的是一个css属性:user-select。user-select有两个值:
none:用户不能选择文本
text:用户可以选择文本
禁用选择代码实现
html:
<p>你可以选择我。</p> <p class="noselect">你不能选择我!</p>
css:
.noselect { -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Chrome/Safari/Opera */ -khtml-user-select: none; /* Konqueror */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; /* Non-prefixed version, currently not supported by any browser */ }
新片场https://www.wode007.com/sites/73286.html 傲视网https://www.wode007.com/sites/73285.html
需要注意的是:
1、user-select并不是一个W3C的css标准属性,浏览器支持的不完整,需要对每种浏览器进行调整 。
2、在 IE < 10 和Opera < 15中我们需要在需要禁止选中的元素上面添加一个属性unselectable="on",否则可能不会生效哦。
除了css外,我们同样可以使用js来实现:
document.body.onselectstart = document.body.ondrag =function(){ return false; }