テキストと画像の選択を無効にする方法 (HTML)
[ この記事は、Windows ランタイム アプリを作成する Windows 8.x および Windows Phone 8.x 開発者を対象としています。Windows 10 向けの開発を行っている場合は、「最新のドキュメント」をご覧ください]
JavaScript を使った Windows ストア アプリの UI でテキストと画像の選択を無効にする方法を説明します。
既定では、ユーザーは JavaScript を使った Windows ストア アプリの UI でコンテンツを選択できません。
テキストや画像など、機密ではないコンテンツを含む要素を選択できるようにするには、カスケード スタイル シート (CSS) のプロパティ (-ms-user-select) を使って既定の動作をオーバーライドします。
-ms-user-select プロパティは次の値をサポートします。
なし
要素内では選択できません。ただし、要素自体は選択に含めることができます。これは最上位の body 要素の既定の動作です。継承により、JavaScript を使った Windows ストア アプリのすべての UI 要素の既定の動作でもあります。要素
要素 (およびすべての子要素) 内で選択できます。ただし、選択は要素の境界に制限されます。テキスト
要素内で選択でき、選択は要素の境界に制限されません。
注 コンテンツの共有や、クリップボードを使ったコピーと貼り付けを許可する場合は、このプロパティを設定する必要があります。
理解しておく必要があること
テクノロジ
必要条件
このトピックを完了するには、JavaScript 用 Windows ライブラリのテンプレートを使う、JavaScript で開発する基本的な Windows ストア アプリの作成経験が必要です。
- Windows ストア アプリを初めて作る場合は、「JavaScript を使った初めての Windows ストア アプリの作成」をご覧ください。
- WinJS のオブジェクトとコントロールの使い方については、「クイック スタート: WinJS コントロールとスタイルの追加」をご覧ください。
手順
選択動作
親要素で click、MSGestureTap、または mouseup イベント ハンドラーが定義されているオブジェクトに対しては、選択は無効になっています。
click、MSGestureTap、または mouseup ハンドラーが存在する場合でも、この動作をオーバーライドして選択を有効にする場合は、touch-select CSS プロパティをオブジェクトに適用し、このプロパティに grippers の値を割り当てる必要があります。
次のいずれかのイベント ハンドラーから preventDefault を呼び出すと、選択は取り消されます。
すべての UI 要素の選択を無効にする
場合によっては、アプリ内のすべての UI 要素について選択を明示的に無効にするのが望ましいことがあります。
この例では、プロパティ値が none の -ms-user-select を <html> 要素とすべての編集できる子要素に適用することで、すべての UI 要素を選択から除外します。
注 すべての要素について UI のフィードバックが一貫するように、cursor プロパティの値を default に設定することもお勧めします。
html input, textarea, *[contenteditable=true]
{
-ms-user-select: none;
cursor: default;
}
編集できない UI 要素の選択を有効にする
アプリ全体で選択を無効にしてある場合に、特定の UI 要素の内容に対してこの設定を無効にするときは、単に -ms-user-select 属性をその要素に適用し、属性値を element に設定します。選択は要素の境界に制限されます。
この例では、指定した ID を持つ要素の内容を選択できるようにします (子要素の内容を含みます)。
注 この要素の UI フィードバックを識別するために、cursor プロパティの値を text に明示的に設定することもお勧めします。
#selectableDiv
{
-ms-user-select: element;
cursor: text;
}
関連トピック
サンプル