jQuery - テキストエリアに文字を追加した時にカーソルを特定の場所に置きたい

Question

前提

htmlで自前のエディタを作っています。
特定のボタンを押すと、<textarea></textarea>内に、特定の文字列を挿入するようにjQueryを使って書いています。

例えば、[H1]というボタンを押せば、テキストエリア内に<h1></h1>が挿入されるものです。

例）

<script>
    jQuery(function ($) {
        $("#h1").click( function() {
            var addText = "<h1></h1>\n";
            $("textarea").focus();
            $("textarea").val( $("textarea").val() + addText );
            $("textarea").scrollTop( $("textarea")[0].scrollHeight );
        });
    });
</script>

<!-- ショートカットボタン -->
<span class="btn btn-tag btn-sm" id="h1">H1</span>

<!-- テキストエリア -->
<textarea type="text"></textarea>

やりたいこと

ここで、<h1></h1>挿入と同時にタグの間にカーソルを持っていくことは可能でしょうか？

イメージ
[H1]押す → <h1>|</h1>

よろしければご教授ください・・・。

Answer 1

さほど難しいはなしではないと思いますが、それ以前に今の仕様だと
h1ボタンを押すと本文の一番最後にh1の空タグが挿入されると思いますが
普通はカーソル位置に挿入するとか、文字列を選択しておいてそれに
h1タグを挟むとかすると思いますが、そうでなくてもいいのでしょうか？

sample

$(function(){
  $('#h1').on('click',function(e){
    var v= $('#hoge').val();
    var selin = $('#hoge').prop('selectionStart');
    var selout = $('#hoge').prop('selectionEnd');
    var befStr="<h1>";
    var aftStr="</h1>";
    var v1=v.substr(0,selin);
    var v2=v.substr(selin,selout-selin);
    var v3=v.substr(selout);
    $('#hoge')
      .val(v1+befStr+v2+aftStr+v3)
      .prop({
        "selectionStart":selin+befStr.length,
        "selectionEnd":selin+befStr.length+v2.length
        })
      .trigger("focus");
  });
});

※ちょっとjQueryっぽく修正しておきました

<textarea type="text" id="hoge" rows=10>
aaabbb
cccddd
eeefff
</textarea><br>
<span id="h1">H1</span>

Comments

[starrow1103]

そうなんです。
できれば「タグを置いた後にカーソル」ではなく、「現在のカーソル位置に挟む形」で置きたいのです・・・

[yambejp]

sampleつけときました
一部jQueryっぽく調整はいってます

[starrow1103]

ありがとうございました！！！
無事期待通りの動きが実現しました。

Javascriptってなんでもできるんですね。

Answer 2

sectionStartというのが使えますね。

• JavaScript でテキストエリア内のカーソルのある位置に文字列を挿入する方法

Comments

[m.ts10806]

と思ったらもう素晴らしいサンプルが・・・
記事流し読み程度にとどめておいてください。