ネイティブアプリらしく見せるために、テキストのドラッグ選択(ハイライト)を無効化する方法を解説します。
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;
}