CSSルールによる文字選択禁止


前言


自分の文章をコピーさせたくないなど、シーンによっては文字の選択を禁止する必要があります.この場合,CSS+JSを用いてこの問題を解決することができる.また、ここで指摘するのは、user-selectは現在W 3 Cの正式な基準ではなく、各ブラウザがプライベート属性でサポートされていることです.

構文

Formal syntax: none | text | all | element

(-prefix-)user-select: none;
(-prefix-)user-select: text;
(-prefix-)user-select: all;
(-prefix-)user-select: element;

.row-of-icons {
    -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互換性


現在、IE 10およびIE 10以上のバージョンのブラウザでは-ms-user-selectというルールが使用できますが、以前のバージョンのIEではjavascriptで選択禁止テキストを実現するしかありません.
$(el).attr('unselectable','on') 
.css({'-moz-user-select':'-moz-none', 
    '-moz-user-select':'none', 
    '-o-user-select':'none', 
    '-khtml-user-select':'none', /* you could also put this in a class */ 
    '-webkit-user-select':'none',/* and add the CSS class here instead */ 
    '-ms-user-select':'none', 
    'user-select':'none' 
}).bind('selectstart', function(){ 
    return false; 
});

リファレンスドキュメント

  • MDN user-select
  • user-select
  • 文字互換IE、Chrome、FF等の選択を禁止する
  • How can I prevent the selection of text in IE?