[解決済み] DIVの全テキストをシングルマウスで選択する
2022-04-27 09:52:50
質問
ユーザーがDIVをクリックしたときに、DIVタグの内容をハイライト/選択するにはどうすればよいでしょうか。アイデアは、すべてのテキストがハイライト/選択されるので、ユーザーがマウスでテキストを手動でハイライトする必要がなく、テキストの一部を見逃す可能性がない、ということです。
例えば、以下のようなDIVがあったとします。
<div id="selectable">http://example.com/page.htm</div>
...そして、ユーザーがそのURLのいずれかをクリックすると、URLのテキスト全体がハイライトされるので、選択したテキストをブラウザ内でドラッグしたり、右クリックでURL全体をコピーしたりすることが簡単にできるようになるのです。
ありがとうございます。
解決方法は?
function selectText(containerid) {
if (document.selection) { // IE
var range = document.body.createTextRange();
range.moveToElementText(document.getElementById(containerid));
range.select();
} else if (window.getSelection) {
var range = document.createRange();
range.selectNode(document.getElementById(containerid));
window.getSelection().removeAllRanges();
window.getSelection().addRange(range);
}
}
<div id="selectable" onclick="selectText('selectable')">http://example.com/page.htm</div>
今度はIDを引数として渡す必要がありますが、この場合は "selectable" ですが、よりグローバルなので、chiborgさんがおっしゃるように、jQueryを使わずにどこでも複数回使用することができます。
関連
-
[解決済み] テスト
-
[解決済み] divをクリックすると、その下にある要素に移動します。
-
[解決済み] jQueryを使ってドロップダウンリスト(セレクトボックス)から選択されたテキストを取得する
-
[解決済み] How do I style a <select> dropdown with only CSS?
-
[解決済み] divの中のテキストを縦に揃えるにはどうしたらいいですか?
-
[解決済み] テキストボックスのEnterキーで、JavaScriptでボタンクリックをトリガーする
-
[解決済み] CSSでdivのアスペクト比を維持する
-
[解決済み] セレクトボックスのオプションをすべて削除してから、オプションを1つ追加して、jQueryで選択するにはどうすればよいですか?
-
[解決済み] divブロック内のテキストを(水平方向と垂直方向に)センタリングするにはどうすればよいですか?
-
[解決済み】CSSを使用して、すべてのブラウザでdiv要素を垂直方向に中央に配置するにはどうすればよいですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
JavaScriptにおけるマクロタスクとミクロタスクの詳細
-
HTML+CSS+JavaScriptで簡単な三目並べゲームを作成する。
-
vueはopenlayersを使用してスカイマップとガオードマップをロードする
-
Vueのフォームイベントのデータバインディングの説明
-
[解決済み】awaitは非同期関数でのみ有効です。
-
[解決済み】gulp anythingを実行するたびに、アサーションエラーが発生します。- タスク関数を指定する必要があります
-
[解決済み】JavaScript TypeError: null のプロパティ 'style' を読み取ることができない
-
[解決済み】React - TypeError: 未定義のプロパティ 'props' を読み取ることができない。
-
[解決済み】 env: node: macにそのようなファイルやディレクトリはありません
-
[解決済み】 Uncaught TypeError : undefined のプロパティ 'replace' を読み取れない In Grid