ホームページ > ウェブフロントエンド > CSSチュートリアル > HTML ラベルでテキストの選択を防ぐにはどうすればよいですか?

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

Mary-Kate Olsen
リリース: 2024-11-11 12:31:03
オリジナル
742 人が閲覧しました

How to Prevent Text Selection in HTML Labels?

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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート