質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CoffeeScript

CoffeeScriptはプログラミング言語です。シンタックスシュガーの導入により、JavaScriptのコードに変換された後動作します。JavaScriptに比べ、可読性と簡潔性が向上しています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

2回答

3840閲覧

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

退会済みユーザー

退会済みユーザー

総合スコア0

CoffeeScript

CoffeeScriptはプログラミング言語です。シンタックスシュガーの導入により、JavaScriptのコードに変換された後動作します。JavaScriptに比べ、可読性と簡潔性が向上しています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2016/03/17 14:27

編集2016/03/17 14:51

###前提・実現したいこと
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内の文字を選択した場合のみ選択範囲の文字が取得できないようです。
(プレビューで横に表示している文字を選択し、ボタンを押した場合は選択範囲の文字が取得できております。)

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

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

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

追記: 2016-03-18 0:23

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

投稿2016/03/17 14:38

編集2016/03/17 15:24
katoy

総合スコア22324

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2016/03/17 14:52

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

2016/03/17 15:24

回答に追記しました。
guest

0

ベストアンサー

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>

投稿2016/03/17 15:56

編集2016/03/17 16:03
unau

総合スコア2468

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2016/03/19 12:05

ありがとうございます。 gemの「jquery.selection」を使わせていただきました。 とても簡単にinputの中の文字を取得し、選択範囲も再設定することができました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問