範囲選択中のテキストをJavaScript(jQuery)で取得する方法がわかりません。

Question

【実現したいこと】

マウスをドラッグしてテキストを範囲選択する。
特定のボタンをクリックすることで範囲選択中の文字をjQueryで取得し、アラートで表示する。

書いたコード

// html
<div class="sample-button">このボタンを押すと選択範囲中のテキストをアラート表示</div>
<div contenteditable="true" class="sampe-textarea">ここに文章があり、この文章内の任意の箇所を範囲選択したいです。</div>

// jQuery
<script>
$('#body').on('click','.sample-button',function(){
  var selectionObject = window.getSelection();
  alert(selectionObject);
});
</script>

問題点

テキストを範囲選択後、ボタンをクリックすると、空のアラートになってしまいます。
おそらく、ボタンをクリックしたタイミングで範囲選択が解除されてしまっているせいだと思います。
試しに.onの箇所を'click'ではなく'mouseover'にすると、ボタンにマウスが合った時点できちんと選択範囲中のテキストがアラートで表示できました。

テキストを範囲選択後、ボタンを「クリック」することで、それまで範囲選択していたテキストをアラート表示する方法がどうしてもわかりません。

もし、上記についておわかりになる方がいらっしゃいましたら、どうかご教授いただけましたら幸いです。

何卒、よろしくお願い申し上げます。

Comments

[yambejp]

> マウスをドラッグしてテキストを範囲選択する。

どこのなににドラッグするのでしょうか？

[yayak]

yambejp様、追記・修正依頼、誠に有難うございます。
説明が足らず申し訳ございません。コードの中身を修正いたしました。
ボタンの下にcontenteditable="true"なテキスト入力個所を設けているのですが、その内部のテキストを範囲選択することを想定しております。
よろしくお願いいたします。

Answer 1

こんにちは。

ベンダープレフィックスが必要なブラウザもありますが、以下のようにしてみてはいかがですか？

サンプル

.sample-button{
  user-select: none;
}

参考：
user-select - CSS: カスケーディングスタイルシート | MDN

Comments

[yayak]

Lhankor_Mhy様、まさかCSSの線から、やりたかったことを実現できるとは思ってもみませんでした。
本当に目からうろこです。
.sample-button{
user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
-moz-user-select: none;
}
上記のようにしたのですが、IOSのChromeではなぜかできませんでした。しかし、PCブラウザではやりたかったことを実現できました。
心より感謝申し上げます。有難うございます。

[Lhankor_Mhy]

なるほど、そうでしたか。
プロパティの対応はあるので、振る舞いが異なるのでしょうね。勉強になりました。

Answer 2

ぱっと思いつくのはsetTimeoutで少し時間差を持つ感じ

Comments

[yambejp]

$(function(){
const selection = getSelection();
var selectText = "";
var start,end,focus;
$(document).on('selectionchange',function(){
focus=selection.focusNode
if(focus.parentNode.closest('.sampe-textarea')){
setTimeout(()=>{
start=selection.anchorOffset;
end=selection.focusOffset;
selectText=focus.data.substring(start,end);
},100);
}
});
$('.sample-button').on('click',function(){
console.log(selectText);
selectText = ""
});
});

[yambejp]

ただしこれだとdivをまたがる範囲は拾えないですね・・・
仕様を検討してみてください

[yayak]

yambejp様、ご提示いただいたコードで、やりたかったことを実現できました。
本当に有難うございます。
setTimeout(()=>のコードを初めて見たので、いっぱい勉強しようと思います。