teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

2

修正

2017/06/20 05:55

投稿

yambejp
yambejp

スコア117875

answer CHANGED
@@ -7,23 +7,26 @@
7
7
  ```javascript
8
8
  $(function(){
9
9
  $('#h1').on('click',function(e){
10
- var t = $('#hoge').get(0);
11
10
  var v= $('#hoge').val();
12
- var selin = t.selectionStart;
11
+ var selin = $('#hoge').prop('selectionStart');
13
- var selout = t.selectionEnd;
12
+ var selout = $('#hoge').prop('selectionEnd');
14
13
  var befStr="<h1>";
15
14
  var aftStr="</h1>";
16
15
  var v1=v.substr(0,selin);
17
16
  var v2=v.substr(selin,selout-selin);
18
17
  var v3=v.substr(selout);
18
+ $('#hoge')
19
- $('#hoge').val(v1+befStr+v2+aftStr+v3);
19
+ .val(v1+befStr+v2+aftStr+v3)
20
+ .prop({
20
- t.selectionStart=selin+befStr.length;
21
+ "selectionStart":selin+befStr.length,
21
- t.selectionEnd=selin+befStr.length+v2.length;
22
+ "selectionEnd":selin+befStr.length+v2.length
23
+ })
22
- $('#hoge').trigger("focus");
24
+ .trigger("focus");
23
25
  });
24
26
  });
27
+ ```
28
+ ※ちょっとjQueryっぽく修正しておきました
25
29
 
26
- ```
27
30
  ```HTML
28
31
  <textarea type="text" id="hoge" rows=10>
29
32
  aaabbb

1

sample

2017/06/20 05:55

投稿

yambejp
yambejp

スコア117875

answer CHANGED
@@ -1,4 +1,34 @@
1
1
  さほど難しいはなしではないと思いますが、それ以前に今の仕様だと
2
2
  h1ボタンを押すと本文の一番最後にh1の空タグが挿入されると思いますが
3
3
  普通はカーソル位置に挿入するとか、文字列を選択しておいてそれに
4
- h1タグを挟むとかすると思いますが、そうでなくてもいいのでしょうか?
4
+ h1タグを挟むとかすると思いますが、そうでなくてもいいのでしょうか?
5
+
6
+ # sample
7
+ ```javascript
8
+ $(function(){
9
+ $('#h1').on('click',function(e){
10
+ var t = $('#hoge').get(0);
11
+ var v= $('#hoge').val();
12
+ var selin = t.selectionStart;
13
+ var selout = t.selectionEnd;
14
+ var befStr="<h1>";
15
+ var aftStr="</h1>";
16
+ var v1=v.substr(0,selin);
17
+ var v2=v.substr(selin,selout-selin);
18
+ var v3=v.substr(selout);
19
+ $('#hoge').val(v1+befStr+v2+aftStr+v3);
20
+ t.selectionStart=selin+befStr.length;
21
+ t.selectionEnd=selin+befStr.length+v2.length;
22
+ $('#hoge').trigger("focus");
23
+ });
24
+ });
25
+
26
+ ```
27
+ ```HTML
28
+ <textarea type="text" id="hoge" rows=10>
29
+ aaabbb
30
+ cccddd
31
+ eeefff
32
+ </textarea><br>
33
+ <span id="h1">H1</span>
34
+ ```