Buttonのclickイベントで、inputの中の選択範囲の文字を取得できない

###前提・実現したいこと
Ruby on Railsでアプリを作っています。
teratailの質問を書くときにあるような、文字を選択しながら「B（Bold）」ボタンを押すと
その範囲の前後に「**」をつけるような処理を書きたいです。

###発生している問題・エラーメッセージ
選択してボタンを押しても「String(document.getSelection())」の部分が空白になり、
「****」という文字が出力されるだけになってしまいます。

どうもボタンを押した瞬間にフォーカスがボタンのほうに移ってしまうことで、
範囲選択が外れてしまっていることが原因のような気がします。
とすれば直前に範囲選択されていた値を取得するべきなのかとも思うのですが
どのようにすれば取得できるか分かりません。
ご存知のかたいらっしゃいましたら教えていただけますでしょうか。よろしくお願いします。

###ソースコード

coffeescript
1$ ->
2  # 入力補助ボタンイベント
3  $('#button_bold').click ->
4    document.getElementById('item_content').value += "**" + String(document.getSelection()) + "**"
5    return

###補足情報(言語/FW/ツール等のバージョンなど)
ruby "2.3.0"
'rails', '4.2.4'

2016.03.17追記
input内の文字を選択した場合のみ選択範囲の文字が取得できないようです。
（プレビューで横に表示している文字を選択し、ボタンを押した場合は選択範囲の文字が取得できております。）

行動規範の内容に同意します

回答2件

getSelection() http://js.studio-kingdom.com/javascript/window/get_selection
↑には、テキストを選択した状態でボタンをクリックすると選択していた文字列を alert 表示する例がしめされていて、実際の動作も試すことができます。
これを参考に javascript -> coffeescript にしてみては如何でしょう。

javascript -> coffeescript には js2coffee を使うと便利です。

http://www.d-wood.com/blog/2014/09/11_6801.html

追記： 2016-03-18 0:23

範囲選択した文字列をクリップボードにコピーする http://coleto84.blog.fc2.com/blog-entry-121.html

...
２）フォームのinput要素やtextarea要素の中の範囲選択された文字列を取得する
しかし「var str = window.getSelection();」の方法では、フォームのinput要素やtextarea要素の中の範囲選択された文字列が取得できません。
では、フォームのinput要素やtextarea要素の中の範囲選択された文字列を取得する方法は？　結論からいうと、以下のような記述となります。
...

投稿2016/03/17 14:38

編集2016/03/17 15:24

katoy

総合スコア22328

退会済みユーザー

2016/03/17 14:52

早速ありがとうございます。ただ、input内の文字を選択した場合のみ選択範囲の文字が取得できないようです。（プレビューで横に表示している文字を選択し、ボタンを押した場合は選択範囲の文字が取得できております。）いただいたリンクの書き方で書いても同様の動作をしております・・・。 input項目から取得するような手法はないということでしょうか・・・。

katoy

2016/03/17 15:24

回答に追記しました。

行動規範の内容に同意します

ベストアンサー

CoffeeScript でなくて JavaScript ですけれど、こんな感じでしょうか。.selectionStart あたりはブラウザ依存性を解決してくれる jQuery な何かがあるのかもしれませんが ...。

基本的な考え方としては、やっぱりクリックのタイミングじゃなくて onselect のタイミングで document.getSelection() から選択範囲を取得して保存しておき、ボタンを押したタイミングで取っておいた選択範囲の情報を使ってテキストエリアの中身を書き換える、というつくりになっています。

html
1<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
2<script>
3$.fn.mymark = function(arg) {
4  var $contentArea = $(this);
5  $contentArea.select(function() {
6    $(this).data('mymark_selection', {
7      start: this.selectionStart,
8      end: this.selectionEnd,
9      length: this.selectionEnd - this.selectionStart });
10  });
11  for (var id in arg) {
12    var marks = arg[id].split('str');
13    (function(id, beforeMark, afterMark) {
14      $('#' + id).click(function() {
15        var myselection = $contentArea.data('mymark_selection');
16        if (! myselection) return false;
17        var content = $contentArea.text();
18        $contentArea.text(
19          content.substr(0, myselection.start) +
20          beforeMark +
21          content.substr(myselection.start, myselection.length) +
22          afterMark +
23          content.substr(myselection.end));
24          $contentArea.data('mymark_selection', null);
25      });
26    })(id, marks[0], marks[1]);
27  }
28};
29</script>
30<textarea id="item_content">これがテストです</textarea>
31<button id="button_bold"><b>bold</b></button>
32<button id="button_italic"><i>itlic</i></button>
33<script>
34$(function() {
35  $('#item_content').mymark(
36    { 'button_bold': '**str**',
37      'button_italic': '__str__' }
38  );
39});
40</script>