使HTML文本无法选择

Question

首先,我一直在这里如何使HTML文本
无法选择但是这并没有解决我的问题,(JavaScript版本运行良好,但我需要使用HTML和CSS,我不能使用JavaScript)我使用推荐的CSS,但是看看我的DEMO拖动鼠标从[从这里拖动]到[到这里]你会看到文字仍然可以选择.
任何方式使它真的无法选择？
谢谢

Answer 1

您可以像这样使用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); };

Answer 2

查看此问题后，想到了另一种方法来防止用户在查看页面时选择文本，基本上是在目标文本上设置掩码：

你的小提琴在这里更新了！

例子：

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>

这里的原理很简单（Fiddle），在文本上有一个块元素，占据它的所有包装空间。

如果您需要一行可供选择而下一行则不可选择，那么缺点就是实现起来很困难。此外，“不可选择”文本上的链接将不可用。

最后说明：

用户始终可以通过查看源代码或通过在网页上从上到下拖动鼠标来解决此问题。