HTML でテキストを選択できないようにするにはどうすればよいですか?

選択できない HTML テキストをレンダリングする方法: 詳細な説明

疑問が生じます: Web ページ上のテキストを選択できないようにして、カーソルが表示されないようにする方法ホバー時にテキスト選択カーソルに変更されることはありません。この動作は通常、Stack Overflow Web サイトにあるようなボタンで観察されます。

CSS3 ソリューション

最新のブラウザの場合、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 フォールバック

古いブラウザの場合、JavaScript フォールバックが必要です:

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

window.onload = function() {
    var labels = document.getElementsByTagName('label');
    for (var i = 0; i < labels.length; i++) {
        disableSelection(labels[i]);
    }
};

jQuery ソリューション

jQuery を使用する場合は、 disableSelection() 関数:

$.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();            
});

以上がHTML でテキストを選択できないようにするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。