SOFTELメモ Developer's blog

会社概要 ブログ 調査依頼 社員募集 ...

クリックしたら選択状態にしたい

問題

<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要素に適用)

関連するメモ

コメント