テキストのドラッグ選択を無効化する

Recipe ID: front-012

ネイティブアプリらしく見せるために、テキストのドラッグ選択(ハイライト)を無効化する方法を解説します。
CSS の user-select プロパティを使用します。

実装方法

グローバルスタイル(src/index.css など)に以下を追加します。

:root {
  user-select: none;
  /* WebKit (Safari/Chrome) 用 */
  -webkit-user-select: none;
  /* カーソルもデフォルトにする */
  cursor: default;
}

部分的に許可する場合

入力フォームや、ユーザーにコピーさせたいテキスト(エラーメッセージやIDなど)では選択を許可します。

/* 選択を許可したい要素向けクラス */
.selectable {
  user-select: text;
  -webkit-user-select: text;
  cursor: text;
}

/* 入力エリアはデフォルトで選択可能だが、念のため */
input, textarea {
  user-select: text;
  -webkit-user-select: text;
}