Q&A
解除したいときはどうする想定ですか？
また選択状態というは、コピペに利用したいという意図でしょうか？
単に選択っぽく見せるのと選択するのはやるべきことが違いますが
実現したいこと
Webページ上でテキストを範囲選択した際、ページ上のどこかをクリックすると選択が解除されます。
ページ上のどこかをクリックしても、選択が解除されないようにする方法はありますか？
Javascriptで、選択を禁止する方法などは見つけられたのですが、選択を解除しない方法は見つけられませんでした。
よろしくお願いいたします。
追記
情報が足りていなかったので追記します。
選択した文章は、選択した時点でwindow.getSelection()で取得しています。
テキスト選択→ボタンクリックで、選択文字の背景に<mark>タグでハイライトを表示しています。
テキスト選択後のボタンクリックでの操作が2回以上ある場合、2回目のクリックで選択されているテキストの背景色が消えてしまい挙動が不自然なので、特定のボタンを押してもテキスト選択時の背景色が消えないようにしたいです。
ありがとうございます。
触れても選択解除されない特定の<div>をひとつ作成することを想定しています。
その<div>以外をクリックすれば通常通り選択解除されるようなイメージです。
すみません、詳しく追記します。
選択した文章は、window.getSelection()で利用しています。
テキスト選択→ボタンクリックで、選択した文字列を利用した計算を行います。
テキスト選択後のボタンクリックでの操作が2回ある場合、2回目のクリックで選択されているテキストの背景色が消えてしまい挙動が不自然なので、特定のボタンを押してもテキストの背景色が消えないようにしたいです。
選択した文章は選択した時点でwindow.getSelection()で取得しているので、ボタンクリック時に取得する必要はありません。
ボタンクリック時に文章を選択した背景色が消えない方法が知りたいです。
なので後者の、「選択っぽく見せる」になるかと思います。
<button>をクリックしてもテキスト選択は変更されないので、「操作が2回以上ある場合」の具体的な手順・コードを説明してください。
回答2件
0
ベストアンサー
ページ上のどこかをクリックしても、選択が解除されないようにする方法はありますか？
範囲選択解除の禁止は、ページ上のどこでも範囲選択不可能にすることと同義です。
従って、範囲選択は1回限り可能であり、2回目以降の範囲選択を禁止すればお望みの挙動となります。
ただし、そんなサイトがあったら、私は二度とそのサイトを訪問しないでしょう。
HTML
1<p>Webページ上でテキストを範囲選択した際、ページ上のどこかをクリックすると選択が解除されます。<br/> 2 ページ上のどこかをクリックしても、選択が解除されないようにする方法はありますか？</p> 3 4<p>Javascriptで、<a href="https://qiita.com/shizen-shin/items/634ce5da6175fc2d1cd8">選択を禁止する方法</a>などは見つけられたのですが、選択を解除しない方法は見つけられませんでした。<br/> 5 よろしくお願いいたします。</p> 6 7<script> 8'use strict'; 9document.addEventListener('selectstart', function handleSelectStart(event) { 10 document.addEventListener(event.type, event => event.preventDefault(), false); 11}, {once: true}); 12</script>
Re: mi_ho さん
投稿2023/08/02 10:19
総合スコア18194
Firefox で試したところ、2回目の範囲選択で1回目の選択範囲が解除されました。Chromeは想定通りでした。UAによって振る舞いが違うのかもしれません。ご参考までに。
ありがとうございました！
みなさんからいただいたコメントを参考にいろいろためしていたのですが、最終的に以下の2パターンが考えられそうです。
パターン1はこちらの回答を参考に考えさせていただいたものなので、こちらの方をベストアンサーにさせていただきます！
パターン1：event.preventDefault()でmousedownイベント停止
```
document.addEventListener('mousedown', function (event) {
if (event.targetが、クリックしても選択解除しないで欲しいボタンであった場合) {
event.preventDefault();
} else {
//選択解除して欲しい箇所のクリックの場合、イベントハンドラを削除すれば選択を再開できる
$('mousedown').off();
}
});
```
パターン2：ボタンのクリックイベントで、再度同じ箇所をselect
```
$('クリックしても選択解除しないで欲しいボタン').click(function () {
var range = document.createRange();
range.setStart(anchor_node, start_point);
range.setEnd(focus_node, end_point);
document.getSelection().removeAllRanges();
document.getSelection().addRange(range);
});
```
0
サンプルを置いておきます。
https://jsfiddle.net/Lhankor_Mhy/h9zr5vpf/
js
1document.querySelector('button').addEventListener('click', e => { 2 const range = document.getSelection().getRangeAt(0); 3 let timer; 4 document.addEventListener('selectionchange', e => { 5 clearTimeout(timer) 6 timer = setTimeout(() => { 7 const selection = document.getSelection(); 8 selection.empty(); 9 selection.addRange(range) 10 }, 1000); 11 }); 12}, { once: true })
投稿2023/08/02 10:16
総合スコア37517
追記と行き違った。選択範囲の話ではなかったのか。
追記が遅れすみませんでした…回答ありがとうございました！
あなたの回答
tips
プレビュー
