どのようにHTMLテキストの選択不可[複製]

StackOverflow https://stackoverflow.com/questions/2310734

質問

この質問に答えはこちら

付け加えたいと思いテキストマイページとしてラベルで選択不可.

する場合には、そのマウスカーソルの文字が見えてこなくなり感動ものではないテキストを選択カーソルです。

良いというものを考えて、監督-選手コメンのボタンはこのウェブサイト（質問、タグ、ユーザーに...)

役に立ちましたか？

解決

JSFは、ここにも、あなたのために多くを行うことはできませんので、あなたは、プレーンバニラのHTMLでこれを行うことはできません。

あなたはまともなブラウザのみ、そしてちょうどCSS3を利用してターゲティングしている場合：

.unselectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

<label class="unselectable">Unselectable label</label>
あなたにも、古いブラウザをカバーしたい場合は、

、その後、フォールバックこのJavaScriptを検討します：

<!doctype html>
<html lang="en">
    <head>
        <title>SO question 2310734</title>
        <script>
            window.onload = function() {
                var labels = document.getElementsByTagName('label');
                for (var i = 0; i < labels.length; i++) {
                    disableSelection(labels[i]);
                }
            };
            function disableSelection(element) {
                if (typeof element.onselectstart != 'undefined') {
                    element.onselectstart = function() { return false; };
                } else if (typeof element.style.MozUserSelect != 'undefined') {
                    element.style.MozUserSelect = 'none';
                } else {
                    element.onmousedown = function() { return false; };
                }
            }
        </script>
    </head>
    <body>
        <label>Try to select this</label>
    </body>
</html>
すでに jQueryのに使用している場合は、

は、その後、ここにあなたができるように、jQueryのに新しい機能が追加されますdisableSelection()別の例です。お使いのjQueryコードの任意の場所に使用します。

<!doctype html>
<html lang="en">
    <head>
        <title>SO question 2310734 with jQuery</title>
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script>
            $.fn.extend({ 
                disableSelection: function() { 
                    this.each(function() { 
                        if (typeof this.onselectstart != 'undefined') {
                            this.onselectstart = function() { return false; };
                        } else if (typeof this.style.MozUserSelect != 'undefined') {
                            this.style.MozUserSelect = 'none';
                        } else {
                            this.onmousedown = function() { return false; };
                        }
                    }); 
                } 
            });

            $(document).ready(function() {
                $('label').disableSelection();            
            });
        </script>
    </head>
    <body>
        <label>Try to select this</label>
    </body>
</html>

他のヒント

ここでは誰もがそうここにある、正しいCSSのバリエーションのすべてに答えを投稿しません 

-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
あなたの問題への完全な近代的な解決策は、純粋にCSSベースのですが、あなたがそのような他の人のようにソリューションにフォールバックする必要があると思い例が提供してきている古いブラウザがそれをサポートしていないことに注意してください。

だから、純粋なCSSでます：

-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;

あなたがそれに追加するように、しかし、マウスカーソルがまだ、要素のテキストの上にときキャレットに変更されます。

cursor: default;

現代CSSはかなり洗練されています。

私はそれがライブの要素で動作しますので、jQueryプラグインは、上記に掲載変えます。

(function ($) {
$.fn.disableSelection = function () {
    return this.each(function () {
        if (typeof this.onselectstart != 'undefined') {
            this.onselectstart = function() { return false; };
        } else if (typeof this.style.MozUserSelect != 'undefined') {
            this.style.MozUserSelect = 'none';
        } else {
            this.onmousedown = function() { return false; };
        }
    });
};
})(jQuery);

次に、あなたができるよう何かます：

$(document).ready(function() {
    $('label').disableSelection();

    // Or to make everything unselectable
    $('*').disableSelection();
});
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top