クリックしたら選択状態にしたい
Category css, JavaScript
2020/03/20
問題
<span>なんとかかんとか</span> などある要素をクリックしたら、要素内のテキストを選択状態にしたいです。
答え
IEを無視してよければ、CSSのみで可能。
インラインで
style="user-select: all;"
CSSで
.us-all {
user-select: all;
}
Bootstrapもclassを用意してくれているので、自分で定義しなくても user-select-all というclassを付与するだけで可能。
<p class="user-select-all">This paragraph will be entirely selected when clicked by the user.</p>
https://getbootstrap.com/docs/4.5/utilities/interactions/
デモ
user-select: all で、クリックすると選択状態になるテキスト
user-select: all で、 クリックすると 選択状態になる 整形済みテキスト（pre要素）
user-select: none で、選択できないテキスト
user-select: none で、 選択できないテキストは コピペ防止に多少は役に立つかも しれませんね （pre要素に適用）
コメント