我正在构建带有一些文本元素(例如选项卡名称)的HTML UI，这些文本元素在被选中时看起来很糟糕。不幸的是，对于用户来说，双击选项卡名称非常容易，该名称在许多浏览器中都是默认选择的。

我也许可以用JavaScript技巧解决这个问题(我也想看看那些答案)-但我真的希望CSS / HTML中的某些功能可以直接在所有浏览器中使用。

解决方案

回答

将div绝对定位在具有z索引更高的文本区域上，并为这些div提供透明的GIF背景图形。

请注意，经过一番思考之后，我们需要将这些"封面"链接起来，因此单击它们会将我们带到选项卡应放置的位置，这意味着我们可以/应该将锚元素设置为" display"来执行此操作：框，宽度和高度以及透明背景图像。

回答

也可以选择图像。

使用JavaScript取消选择文本是有局限性的，因为即使在我们要选择的地方，也可能会发生这种情况。为了确保事业的成功发展，请避开所有需要能力来影响或者管理浏览器的要求，除非…当然，除非他们为我们带来丰厚的回报。

回答

对于Firefox，我们可以将CSS声明" -moz-user-select"应用到" none"。
查阅他们的文档，用户选择。

正如他们所说，这是对未来"用户选择"的"预览"，因此也许基于Opera或者基于WebKit的浏览器将对此提供支持。我还记得为InternetExplorer找到了一些东西，但我不记得是什么:)。

无论如何，除非在特定情况下文本选择使某些动态功能失败，否则我们不应该真正覆盖用户对网页的期望，而是能够选择所需的任何文本。

回答

<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

回答

试试这个：

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

简单但有效...可在所有主要浏览器的当前版本中使用。

回答

如果看起来很糟，则可以使用CSS更改所选部分的外观。

回答

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

回答

我通过http://www.quirksmode.org/css/selection.html所述的CSS找到了一定程度的成功：

::selection {
    background-color: transparent;
}

它解决了我在AIR应用程序(WebKit引擎)中的一些ThemeRollerul元素所遇到的大多数问题。仍然会得到一小片(大约15 x 15)的空白，但之前已选择了一半的页面。

回答

对于Safari，-khtml-user-select：none'，就像Mozilla的-moz-user-select`一样(或者在JavaScript中，为target.style.KhtmlUserSelect =" none";)。

回答

如果删除删除的行，那么以下内容在Firefox中的工作就很有趣了。
任何人都知道为什么需要写行。

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

回答

Firebug可以轻松绕开任何JavaScript或者CSS方法(例如Flickr的案例)。

我们可以在CSS中使用:: selection伪元素来更改突出显示颜色。

如果选项卡是链接，并且处于活动状态的虚线矩形值得关注，那么我们也可以将其删除(当然要考虑可用性)。

回答

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