1. ホーム
  2. ジャバスクリプト

[解決済み】テキスト入力フィールド内のカーソル位置(文字数)を取得する。

2022-04-17 17:03:38

質問

入力フィールドの中からキャレットの位置を取得するには?

私はGoogleでいくつかの断片を見つけましたが、弾丸の証拠は何もありません。

基本的にjQueryのプラグインのようなものが理想的で、単純に以下のようなことができます。

$("#myinput").caretPosition()

解決方法は?

アップデートが容易になる。

使用方法 field.selectionStart この回答例 .

ご指摘いただいた@commonSenseCodeさんに感謝します。


古い回答です。

こんな解決策を見つけました。jqueryベースではありませんが、jqueryに統合するのは問題ないでしょう。

/*
** Returns the caret (cursor) position of the specified text field (oField).
** Return value range is 0-oField.value.length.
*/
function doGetCaretPosition (oField) {

  // Initialize
  var iCaretPos = 0;

  // IE Support
  if (document.selection) {

    // Set focus on the element
    oField.focus();

    // To get cursor position, get empty selection range
    var oSel = document.selection.createRange();

    // Move selection start to 0 position
    oSel.moveStart('character', -oField.value.length);

    // The caret position is selection length
    iCaretPos = oSel.text.length;
  }

  // Firefox support
  else if (oField.selectionStart || oField.selectionStart == '0')
    iCaretPos = oField.selectionDirection=='backward' ? oField.selectionStart : oField.selectionEnd;

  // Return results
  return iCaretPos;
}