Question

首先，我来过How to make HTML Text unselectable 但这并没有解决我的问题，（JavaScript版本运行良好，但我需要使用HTML和CSS，我不能使用JavaScript ）我使用推荐的CSS，但看看我的{ {3}}将鼠标从[从这里拖动]拖动到[到此处]，您将看到文本仍然可以选择。
任何方式使真的无法选择？
感谢

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

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

您的小提琴已更新here！

示例：的

<强> 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>

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

如果您需要一行可选而下一行不可选，那么这次失败是一项艰难的实施。此外，“不可选”文字上的链接也不可用。

最后说明：

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

Answer 3

尝试这样的事情

                <!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/

编辑：这是一种跨浏览器方法，用于使用不可选择的=“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>

Answer 4

覆盖完整透明文字：

 <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>

使HTML文本无法选择

4 个答案: