it-swarm.cn

有没有办法在HTML页面上使文本无法选择?

我正在构建一个包含一些文本元素的HTML UI,例如选项卡名称,这些元素在选中时看起来很糟糕。不幸的是,用户很容易双击选项卡名称,默认情况下会在许多浏览器中选择它。

我或许可以通过JavaScript技巧来解决这个问题(我也希望看到这些答案) - 但我真的希望CSS/HTML中的某些东西直接适用于所有浏览器。

132
Tyler

在大多数浏览器中,这可以使用CSS实现:

*.unselectable {
   -moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;

   /*
     Introduced in IE 10.
     See http://ie.Microsoft.com/testdrive/HTML5/msUserSelect/
   */
   -ms-user-select: none;
   user-select: none;
}

对于IE <10和Opera,您需要使用您希望不可选择的元素的unselectable属性。您可以使用HTML中的属性进行设置:

<div id="foo" unselectable="on" class="unselectable">...</div>

遗憾的是,这个属性不是继承的,这意味着你必须在<div>中的每个元素的开始标记中放置一个属性。如果这是一个问题,您可以使用JavaScript以递归方式为元素的后代执行此操作:

function makeUnselectable(node) {
    if (node.nodeType == 1) {
        node.setAttribute("unselectable", "on");
    }
    var child = node.firstChild;
    while (child) {
        makeUnselectable(child);
        child = child.nextSibling;
    }
}

makeUnselectable(document.getElementById("foo"));
184
Tim Down
<script type="text/javascript">

/***********************************************
* Disable Text Selection script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code

***********************************************/


function disableSelection(target){

    if (typeof target.onselectstart!="undefined") //IE route
        target.onselectstart=function(){return false}

    else if (typeof target.style.MozUserSelect!="undefined") //Firefox route
        target.style.MozUserSelect="none"

    else //All other route (ie: Opera)
        target.onmousedown=function(){return false}

    target.style.cursor = "default"
}



//Sample usages
//disableSelection(document.body) //Disable text selection on entire body
//disableSelection(document.getElementById("mydiv")) //Disable text selection on element with id="mydiv"


</script>

_编辑_

代码显然来自 http://www.dynamicdrive.com

41
dimarzionist

所有正确的CSS变体都是:

-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
32
Blowsie

试试这个:

<div onselectstart="return false">some stuff</div>

简单但有效......适用于所有主流浏览器的当前版本。

13
Stephen M. Redd

对于Firefox,您可以将CSS声明“-moz-user-select”应用于“none”。查看他们的文档,user-select

这是他们所说的未来“用户选择”的“预览”,所以也许 OperaWebKit 基于浏览器将支持它。我还记得为Internet Explorer找到了一些东西,但我不记得是什么:)。

无论如何,除非是特定的情况,文本选择使一些动态功能失败,你不应该真正覆盖用户期望从网页,并且能够选择他们想要的任何文本。

11
Jorge Alves

我在这里描述的CSS中找到了一定程度的成功 http://www.quirksmode.org/css/selection.html

::selection {
    background-color: transparent;
}

它解决了我在AIR应用程序(WebKit引擎)中使用一些ThemeRoller ul元素时遇到的大多数问题。仍然会得到一个小的(大约15 x 15)虚拟补丁被选中,但之前选择了一半的页面。

8
jlleblanc

绝对地将文本区域上的div放在z-index较高的位置,并为这些div提供透明的 _ gif _ background图形。

注意一点 - 你需要将这些'封面'链接起来,所以点击它们会把你带到选项卡所在的位置,这意味着你可以/应该将锚元素设置为display:box,设置宽度和高度以及透明背景图像。

6
Dave Rutledge

对于Safari,-khtml-user-select: none,就像Mozilla的-moz-user-select(或者,在JavaScript中,target.style.KhtmlUserSelect="none";)。

4
Alan Hensel

有关为什么可能需要抑制选择的示例,请参阅 SIMILE TImeline ,它使用拖放来探索时间轴,在此期间意外的垂直鼠标移动会导致标签意外突出显示,这看起来很奇怪。

4
pdc

对于那些感兴趣的人来说,这是一个 Sass mixin(scss)。 Compass / CSS 3似乎没有用户选择mixin。

// @usage use within a rule
// ex. img {@include user-select(none);}
// @param assumed valid user-select value
@mixin user-select($value)
{
    & {
        -webkit-touch-callout: $value;
        -webkit-user-select: $value;
        -khtml-user-select: $value;
        -moz-user-select: $value;
        -ms-user-select: $value;
        user-select: $value;
    }
}

虽然Compass会以更强大的方式完成它,即只添加对您选择的供应商的支持。

3
rgb

“如果你的内容真的很有趣,那么你最终可以做的很少就是保护它”

这是真的,但根据我的经验,大多数复制与“最终”或极客或确定的抄袭者或类似的东西无关。它通常是由无知的人随意复制,甚至一个简单的,容易被击败的保护(很容易被像我们这样的人打败)就可以很好地阻止他们。他们对“查看源”或缓存或其他任何事情一无所知......哎呀,他们甚至不知道Web浏览器是什么,或者他们正在使用它。

3
Big Bill

如果它看起来很糟糕,您可以使用CSS来更改所选部分的外观。

1
Wedge

也可以选择图像。

使用JavaScript取消选择文本是有限制的,因为即使在您想要选择的地方也可能发生这种情况。为了确保丰富而成功的职业生涯,避开所有需要影响或管理浏览器的能力的所有要求......当然,除非他们付出的代价非常高。

1
Kinjal Dixit

任何JavaScript或CSS方法都很容易被Firebug规避(就像Flickr的情况一样)。

您可以在CSS中使用 ::selection伪元素 来改变高亮颜色。

如果选项卡是链接并且 虚线矩形处于活动状态 是关注的,您也可以删除它(当然考虑可用性)。

1
Taylor Edmiston

关闭可选性有很多时候可以增强用户体验。

例如,允许用户复制页面上的文本块而不复制与其相关联的任何界面元素的文本(这些文本将散布在正被复制的文本中)。

1
kbcom

如果我删除写行不起作用,以下在Fi​​refox中工作有趣。任何人都知道为什么需要写行。

<script type="text/javascript">
document.write(".");
document.body.style.MozUserSelect='none';
</script>
0
hbtdev