8

首先，我一直在这里How to make HTML Text unselectable
但这并不能解决我的问题，（JavaScript 版本运行良好，但我需要使用 HTML 和 CSS，我不能使用 JavaScript）我使用了推荐的 CSS，但是看看我的DEMO将鼠标从 [drag from here] 拖动到 [to here] 你会看到文本仍然是可选择的。
有什么办法让它真的无法选择？
谢谢

4

4 回答 4

7

您可以像这样使用 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); };
于 2012-05-04T17:13:59.840 回答
3

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

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

例子：

CSS

.wrapTxt {
  position: relative;
}
.wrapTxt .mask {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

HTML

<p class="wrapTxt">
  This is my text! My text is mine and no one Else's!
  <span class="mask"></span>
</p>

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

如果您需要一条线可选择而下一条线不可选，那么失败是一个艰难的实现。此外，“不可选择”文本上的链接将不可用。

最后说明：

用户可以通过查看源代码或从网页的顶部到底部拖动鼠标来解决此问题。

于 2012-05-06T03:02:36.727 回答
2

尝试这样的事情

                <!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>
于 2012-05-04T19:40:47.127 回答
1

覆盖全透明文本：

 <div style="position:absolute;left: 1;top:1;z-index:1;font-size: 10pt;color: rgb(0, 0, 0);">highline me</div><br/><div style="position:absolute;left: 0;top:0;;z-index:2;font-size: 20pt;color: rgba(0, 0, 0, 0);">*********</div>
于 2013-11-20T22:38:42.573 回答