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

Question

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

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

Answer 1

在大多数浏览器中,这可以使用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"));

Answer 2

<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

Answer 3

所有正确的CSS变体都是:

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

Answer 4

试试这个:

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

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

Answer 5

对于Firefox,您可以将CSS声明"-moz-user-select"应用于"none".查看他们的文档,用户选择.

这是他们所说的未来"用户选择"的"预览",因此基于Opera或WebKit的浏览器可能会支持它.我还记得为Internet Explorer找到了一些东西,但我不记得是什么:).

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

Answer 6

我发现这里描述的CSS有一定程度的成功http://www.quirksmode.org/css/selection.html:

::selection {
    background-color: transparent;
}

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

Answer 7

绝对地将文本区域上的div放在z-index较高的位置,并为这些div提供透明的GIF背景图形.

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