[解決済み] テキストエリア内のキャレットの列（ピクセルではない）位置を最初から文字単位で取得するにはどうしたらよいですか？

質問

のキャレット位置はどのように取得するのですか？ <textarea> JavaScriptを使用していますか？

例えば This is| a text

これは、以下を返すはずです。 7 .

カーソルや選択範囲を囲む文字列を返すようにするにはどうしたらいいでしょうか？

例 'This is', '', ' a text' .

という単語がハイライトされている場合、次のように返されます。 'This ', 'is', ' a text' .

解決方法は？

FirefoxやSafari（その他のGeckoベースのブラウザ）では、textarea.selectionStartを使えば簡単にできますが、IEではうまくいかないので、以下のような工夫が必要になります。

function getCaret(node) {
  if (node.selectionStart) {
    return node.selectionStart;
  } else if (!document.selection) {
    return 0;
  }

  var c = "\001",
      sel = document.selection.createRange(),
      dul = sel.duplicate(),
      len = 0;

  dul.moveToElementText(node);
  sel.text = c;
  len = dul.text.indexOf(c);
  sel.moveStart('character',-1);
  sel.text = "";
  return len;
}

( ここでコードを完成させる )

また、jQueryの フィールド選択 プラグインを使用すると、このようなことが可能になり、さらに多くのことができるようになります。

編集する 実際に上記のコードを再実装してみました。

function getCaret(el) { 
  if (el.selectionStart) { 
    return el.selectionStart; 
  } else if (document.selection) { 
    el.focus(); 

    var r = document.selection.createRange(); 
    if (r == null) { 
      return 0; 
    } 

    var re = el.createTextRange(), 
        rc = re.duplicate(); 
    re.moveToBookmark(r.getBookmark()); 
    rc.setEndPoint('EndToStart', re); 

    return rc.text.length; 
  }  
  return 0; 
}

例を確認する こちら .