html/cssで範囲選択させない

ブラウザ上で範囲選択をさせたくない場合がたまにある。そういう場合はCSSとかでゴニョゴニョできる。

<div id="content">
  <p>
    あいうえお<br>
    かきくけこ
  </p>
</div>

こういう要素が有った場合。まずCSS

  #content {
    -moz-user-select: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
  }

あと、IE用に

<div id="content" unselectable="on">
</div>

とunselectableを指定すると良い。どれも標準化されてる訳でもないし完全では無い。けど主要なブラウザには対応出来る。
あとはCSSでcursor: default; とか指定すると更に良いと思う。img要素とかにも効く。

「html/cssで範囲選択させない」への2件のフィードバック

  1. これ用途はどんなかんじ?

    ぱっと思いついたのだとテーブルとかが入り乱れて範囲選択するとコピペがうまくできねーよってのを思ったなぁ。

  2. divとかテーブルのtrをドラッグアンドドロップで移動したり、クリックイベントを付ける場合に、範囲選択されると邪魔になる。
    CSSの方は一応CSS3で対応するはずなので、全てのブラウザが対応すると
    user-select: none;
    だけで済むけど、そんなのは何年も先の事かな。

コメントを残す