使html文本不可选
使html文本不可选
提问于 2012-05-04 17:04:54
首先，我在这里，如何使HTML文本不可选
但这并不能解决我的问题( JavaScript版本工作得很好，但我需要使用HTML和CSS，我不能使用JavaScript)我使用了推荐的CSS，但是看看我的演示拖拽鼠标从这里拖到这里你会发现文本仍然是可选择的。
有没有办法让真的不能选择呢？
谢谢
回答 4
Stack Overflow用户
回答已采纳
发布于 2012-05-06 03:02:36
在检查了这个问题之后，想到了另一种方法来阻止用户在查看页面时选择文本，基本上是在目标文本上设置一个掩码：
您的Fiddle更新了这里！
示例：
CSS
.wrapTxt {
position: relative;
}
.wrapTxt .mask {
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}<p class="wrapTxt">
This is my text! My text is mine and no one Else's!
<span class="mask"></span>
</p>这里的原理是简单的(小提琴)，在文本上有一个块元素，占据了它所有的包装空间。
如果您需要一条可以选择的行，而另一条不需要选择行，则失败是一个艰难的实现。此外，“不可选择”文本上的链接将无法获得。
最后注：
用户可以通过查看源代码，或者通过将鼠标从上到下拖拽到网页的底部，来解决这个问题。
Stack Overflow用户
发布于 2012-05-04 17:13:59
您可以像这样使用CSS：
CSS
.unselectable {
-webkit-user-select: none; /* Chrome all / Safari all */
-moz-user-select: none; /* Firefox all */
-ms-user-select: none; /* IE 10+ */
/* No support for these yet, use at own risk */
-o-user-select: none;
user-select: none;
}对于较旧的IE版本，这个问题通常更难处理，但您可以使用一种行为：
CSS
.unselectable {
behavior: url(ieUserSelectFix.htc);
}和行为文件"ieUserSelectFix.htc":
<public:component lightweight="true">
<public:attach event="ondocumentready" onevent="stopSelection()" />
<script type="text/javascript">
<!--
function stopSelection() {
element.onselectstart = function() { return(false); };
element.setAttribute('unselectable', 'on', 0);
}
//-->
</script>
</public:component>带Javascript的你可以：
yourElement.onselectstart = function() { return(false); };Stack Overflow用户
发布于 2012-05-04 19:40:47
试试像这样的东西
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Disable /Prevent Text Selection jQuery-JavaScript</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
// Begin:
// Jquery Function to Disable Text Selection
(function($){if($.browser.mozilla){$.fn.disableTextSelect=function(){return this.each(function(){$(this).css({"MozUserSelect":"none"})})};$.fn.enableTextSelect=function(){return this.each(function(){$(this).css({"MozUserSelect":""})})}}else{if($.browser.msie){$.fn.disableTextSelect=function(){return this.each(function(){$(this).bind("selectstart.disableTextSelect",function(){return false})})};$.fn.enableTextSelect=function(){return this.each(function(){$(this).unbind("selectstart.disableTextSelect")})}}else{$.fn.disableTextSelect=function(){return this.each(function(){$(this).bind("mousedown.disableTextSelect",function(){return false})})};$.fn.enableTextSelect=function(){return this.each(function(){$(this).unbind("mousedown.disableTextSelect")})}}}})(jQuery)
// EO Jquery Function
// Usage
// Load Jquery min .js ignore if already done so
// $("element to disable text").disableTextSelect();
// $("element to Enable text").enableTextSelect();
//
jQuery(function($) {
$("body").disableTextSelect();
$("#code").mouseover(function(){
$("body").enableTextSelect();
});
$("#code").mouseout(function(){
// Code for Deselect Text When Mouseout the Code Area
if (window.getSelection) {
if (window.getSelection().empty) { // Chrome
window.getSelection().empty();
} else if (window.getSelection().removeAllRanges) { // Firefox
window.getSelection().removeAllRanges();
}
} else if (document.selection) { // IE?
document.selection.empty();
}
$("body").disableTextSelect();
});
});
</script>
<style type="text/css">
<!--
body {
margin-left: 10px;
margin-top: 10px;
}
#code
{
padding:20px;
border:2px dashed #CCC;
font-family:"Courier New", Courier, monospace;
font-size:15px;
background-color:#EEE;
}
-->
</style>
</head>
<body>
<h2>Disable /Prevent Text Selection jQuery-JavaScript</h2>
<p>Below this Code Area User can Allow to Select a Text in other Area text selection was disabled</p>
<p id="code">
$(".elementsToDisableSelectFor").disableTextSelect();</p>
<p>When you are leaving above code box selection was deselected! If selected !</p>
</body>
</html>检查jsfiddle输出：
http://jsfiddle.net/bHafB/
编辑:这是一个跨浏览器的方法，防止使用unselectable="on“元素属性进行文本选择。
<!DOCTYPE html>
<html>
<head>
<title>Unselectable Text</title>
<style type="text/css">
[unselectable=on] { -moz-user-select: none; -khtml-user-select: none; user-select: none; }
</style>
</head>
<body id="doc">
<p unselectable="on">For example, the text in this paragraph
cannot be selected.
For example, the text in this paragraph
cannot be selected
For example, the text in this paragraph
cannot be selected</p>
</body>
</html>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/10453167
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号