8

まず、私はここにいます HTMLテキストを選択不可にする方法しかし
、それは私の問題を解決しません.しかし、デモを見て [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>

ここでの原則は単純です(Fiddle)、テキストの上にブロック要素を持ち、そのラッパースペースをすべて占有します。

ある行を選択可能にし、次の行を選択できないようにする必要がある場合、実装は困難です。また、「選択不可」のテキストのリンクは利用できません。

最後の注意:

ユーザーは、ソース コードを見るか、Web ページの上から下にマウスをドラッグすることで、いつでもこれを回避できます。

于 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 に答える