インタラクション

ユーザーのインタラクションするかを変更するユーティリティクラスです。

Text selection

ユーザのテキスト選択を制御するクラスです。

This paragraph will be entirely selected when clicked by the user.

This paragraph has default select behavior.

This paragraph will not be selectable when clicked by the user.

vue
<template>
 <b-p user-select="all">
  This paragraph will be entirely selected when clicked by the user.
 </b-p>
 <b-p user-select="auto">
  This paragraph has default select behavior.
 </b-p>
 <b-p user-select="none">
  This paragraph will not be selectable when clicked by the user.
 </b-p>
</template>

Pointer events

Bootstrapには、インタラクションを防止したり、追加したりするためのカーソル用クラス pointer-events="none" と pointer-events="auto" を用意しています。

このリンク はクリックできません。

このリンク はクリックできます（デフォルトの動作です）。

このリンク はポインターイベントプロパティが親から継承されているため、このリンクはクリックできません。しかし、 このリンク はpe-autoクラスを持っており、クリックすることができます。

pointer-events="none"クラス（およびそれが設定するpointer-eventsCSSプロパティは、ポインタ（マウス、スタイラス、タッチ）によるインタラクションを防ぐだけです。pointer-events="none"が設定されたリンクやコントロールは、デフォルトでは、キーボードユーザーにとってはまだフォーカス可能であり、アクション可能です。キーボードユーザーに対しても完全に無効化されるようにするには、tabindex="-1"（キーボードフォーカスを受け取らないようにする）やaria-disabled="true"（事実上無効化されていることを支援技術に伝える）といった属性を追加し、場合によってはJavaScriptを使用して、アクション可能であることを完全に防ぐ必要があるかもしれません。

可能であれば、より簡単な解決策は次のとおりです。

  • フォームコントロールの場合は、disableHTML属性を追加します。
  • リンクの場合は、href属性を追加して、非インタラクティブなアンカーまたはプレイスホルダーリンクにします。

See Also