質問編集履歴

3 参考サイトの追加

_shunsuK

_shunsuK score 3

2017/05/24 17:36  投稿

【jQuery】フォーム内の選択テキストの前後に任意のテキストを挿入する
### 前提・実現したいこと
複数あるテキストフォーム(input type="text"、textarea)にフォーカスが当たっている状態で、テキストの一部又は全部を選択したときに、ボタンをクリックして対応するタグをテキストの前後に挿入したい。
### 試したこと
`current = $(":focus");`でカーソルが当たっている要素を取得し、`window.getSelection().toString()`で選択している範囲の値も取得できました。
ただここから、選択範囲の前後にタグを入れる方法がわかりません。
ボタンをクリックしたときに、`current`に下のソースのようなことや、参考サイトのような`.insertBeforeSelection('xxxx')`を試しました。が`current..insertBeforeSelection is not a function`とconsoleにエラーがでています。うまくいきません。
```javascript
$(function(){
 
 .....
 
 var current;
 var inputVal;
 $("#contents input").focusin(function(){
   current = $(":focus");
   console.log(window.getSelection().toString());
 }
 $('#btn').on('click', function(){
     current.selection('insert', {
          text: 'test', mode: 'before'
     }).selection('insert', {
          text: 'test', mode: 'after'
     });
 });
 
 .....
 
});
```
```HTML
<button id="btn" type="button">button</button>
<div id="contents">
 
 ...
 // input type="text"とtextareaは複数あります。
 // appendして追加することもあります。
 <div>
   <input type="text" value="xxxxxxxxxxxx">
 </div>
 <div>
   <textarea></textarea>
 </div>
 
 ...
 
</div>
```
お詳しい方、ご教示願います。
お詳しい方、ご教示願います。
## 追記
参考サイト:https://weekendphp.com/jQuery/jquery.selection.html
  • JavaScript

    21025 questions

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

  • jQuery

    8374 questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

2 タイトルの編集

_shunsuK

_shunsuK score 3

2017/05/24 08:48  投稿

### 前提・実現したいこと
複数あるテキストフォーム(input type="text"、textarea)にフォーカスが当たっている状態で、テキストの一部又は全部を選択したときに、ボタンをクリックして対応するタグをテキストの前後に挿入したい。
### 試したこと
`current = $(":focus");`でカーソルが当たっている要素を取得し、`window.getSelection().toString()`で選択している範囲の値も取得できました。
ただここから、選択範囲の前後にタグを入れる方法がわかりません。
ボタンをクリックしたときに、`current`に下のソースのようなことや、参考サイトのような`.insertBeforeSelection('xxxx')`を試しました。が`current..insertBeforeSelection is not a function`とconsoleにエラーがでています。うまくいきません。
```javascript
$(function(){
.....
var current;
var inputVal;
$("#contents input").focusin(function(){
current = $(":focus");
console.log(window.getSelection().toString());
}
$('#btn').on('click', function(){
current.selection('insert', {
text: 'test', mode: 'before'
}).selection('insert', {
text: 'test', mode: 'after'
});
});
.....
});
```
```HTML
<button id="btn" type="button">button</button>
<div id="contents">
...
// input type="text"とtextareaは複数あります。
// appendして追加することもあります。
<div>
<input type="text" value="xxxxxxxxxxxx">
</div>
<div>
<textarea></textarea>
</div>
...
</div>
```
お詳しい方、ご教示願います。
  • JavaScript

    21025 questions

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

  • jQuery

    8374 questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

1 タイトル

_shunsuK

_shunsuK score 3

2017/05/23 23:02  投稿

### 前提・実現したいこと
複数あるテキストフォーム(input type="text"、textarea)にフォーカスが当たっている状態で、テキストの一部又は全部を選択したときに、ボタンをクリックして対応するタグをテキストの前後に挿入したい。
### 試したこと
`current = $(":focus");`でカーソルが当たっている要素を取得し、`window.getSelection().toString()`で選択している範囲の値も取得できました。
ただここから、選択範囲の前後にタグを入れる方法がわかりません。
ボタンをクリックしたときに、`current`に下のソースのようなことや、参考サイトのような`.insertBeforeSelection('xxxx')`を試しました。が`current..insertBeforeSelection is not a function`とconsoleにエラーがでています。うまくいきません。
```javascript
$(function(){
 
 .....
 
 var current;
 var inputVal;
 $("#contents input").focusin(function(){
   current = $(":focus");
   console.log(window.getSelection().toString());
 }
 $('#btn').on('click', function(){
     current.selection('insert', {
          text: 'test', mode: 'before'
     }).selection('insert', {
          text: 'test', mode: 'after'
     });
 });
 
 .....
 
});
```
```HTML
<button id="btn" type="button">button</button>
<div id="contents">
 
 ...
 // input type="text"とtextareaは複数あります。
 // appendして追加することもあります。
 
 <div>
   <input type="text" value="xxxxxxxxxxxx">
 </div>
 <div>
   <textarea></textarea>
 </div>
 
 ...
 
</div>
```
お詳しい方、ご教示願います。
  • JavaScript

    21025 questions

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

  • jQuery

    8374 questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る