textarea のカーソル位置にテキストを挿入する

JavaScript jQuery

jQuery 1.9 を用いて textarea の現在のカーソル位置にテキストを挿入します。動作は IE 6 〜 9, Chrome, FireFox の最新版で確認。

function insertAtCaret(target, str) {
  var obj = $(target);
  obj.focus();
  if(navigator.userAgent.match(/MSIE/)) {
    var r = document.selection.createRange();
    r.text = str;
    r.select();
  } else {
    var s = obj.val();
    var p = obj.get(0).selectionStart;
    var np = p + str.length;
    obj.val(s.substr(0, p) + str + s.substr(p));
    obj.get(0).setSelectionRange(np, np);
  }
}

引数は target が 対象になるオブジェクト（ID による指定を想定）で str が挿入するテキストになります。jQuery 1.9 系からは $.browser.msie が使えなくなっているため、ユーザーエージェントの値を確認して分岐させています。実際の使用例は次のようになります。

<a href="#" onclick="insertAtCaret('#hoge', 'fuga');return false;">押す</a>

参考

以下のサイトのコードをベースに使わせて頂きました。多謝。

http://d.hatena.ne.jp/okinaka/20090727/1248671860