【getSelection】JavaScriptを使ってカーソルで選択した範囲の文字列を表示

【getSelection】JavaScriptを使ってカーソルで選択した範囲の文字列を表示

HTMLページに掲載のテキストをマウスカーソルで選択し、選択範囲の文字列をtextareaに表示します。

CSSの記述

※ここは重要では無いので必要に応じて書き換えてください。

<style type="text/css">
body{
  font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"MS Pゴシック",Arial,sans-serif;
  padding: 0;
  margin: 0;
  overflow-x: hidden;
  line-height: 1.8em;
  text-align: center;
}
h1{
  font-size:26px;
  text-align:center;
  font-weight:normal;
  padding:10px 0 20px 0;
  line-height: 1.4em;
}
h2{
  font-size:20px;
}
</style>

ページ内テキストと選択範囲文字出力先HTMLの記述

※textareaに選択範囲の文字列を出力します。

<h1>マウスカーソルで選択した範囲の文字列をtextareaに表示します。<br>本ページの文字列をマウスカーソルで選択してみて下さい。</h1>
<br>

<h2>abcdefghijklmnopqrstuvwxyz</h2>
<br>
<h2>あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん</h2>
<br>
<h2>がぎぐげござじずぜぞだぢづでどばびぶべぼぱぴぷぺぽ</h2>
<br>
<br>

<div>以下に本ページで選択した範囲の文字列を表示します。</div>
<textarea id="copy" cols="100" rows="18"></textarea>

getSelection()を使って選択範囲の文字列を返し、文字列を出力するJavaScript処理

※getSelectionで選択文字列を抽出し、id=”copy”タグ(textarea)に出力します。

<script type="text/javascript">
document.onselectionchange = function() {
  var cpytxt = document.getSelection();
  document.getElementById("copy").textContent = cpytxt;
}
</script>

JavaScriptのgetSelection()を使用したデモページ

【getSelection】カーソルで選択した範囲の文字列を表示するデモ

 

※流用される場合は自己責任でお願いします。
 デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。