HTML ラベルでテキストの選択を防ぐにはどうすればよいですか?

HTML でのテキスト選択を効果的に防ぐ方法

Web ページを作成するとき、デフォルトでは選択できないラベルを追加する必要が生じる場合があります。これは、テキストをコピーまたは強調表示したくないボタンやナビゲーション要素に特に役立ちます。

CSS ベースのソリューション (最新のブラウザ)

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 フォールバック (古いブラウザ)

古いブラウザの場合CSS3 サポートがない場合は、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; };
    }
}

disableSelection(document.querySelector("label"));

この JavaScript 関数は、ページ上のすべてのラベルを反復処理し、適切なイベント ハンドラーを適用して選択を無効にします。

jQuery ソリューション

jQuery を使用している場合は、次のコードで jQuery ライブラリを拡張できます:

$.fn.disableSelection = function() { 
    this.each(function() {  
        disableSelection(this);
    }); 
};

次に、次のようにすべてのラベルの選択を無効にできます:

$("label").disableSelection();

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