テキスト入力フィールド内のカーソル位置（文字数）を取得します

211

入力フィールド内からキャレットの位置を取得するにはどうすればよいですか？

私はGoogle経由でいくつかの断片を見つけましたが、何の証拠にもなりません。

基本的にはjQueryプラグインのようなものが理想的であるため、私は簡単にできます

$("#myinput").caretPosition()
javascript  jquery  html 
— MarkB29
ソース
2
「カーソル位置」を検索してみてください。そうすれば、より多くのヒットが得られるだけでなく、SOに関するこのトピックもいくつか得られます。
— アレック
1
— CMS
2
@CMSで位置を見つける<input>ことは、で行うよりも簡単です<textarea>。
— Andrew Mao 14年
1
@AndrewMao：テキストがスクロールされ、キャレットがsize文字を過ぎている場合はさらに難しくなります。
— Dan Dascalescu 2014年
@alec：キャレットの代わりにカーソルを検索すると、より多くの結果が得られることに同意します。他で指摘したように、キャレットの方が適切な用語であることを学びました。カーソルはながら何内の位置を表すキャレットがテキストに特異的に位置を表します。
— Suncat2000

回答:

247

更新が簡単：

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;
}
— ベズマックス
ソース
9
else if (oField.selectionStart || oField.selectionStart == '0')可能性がありますelse if (typeof oField.selectionStart==='number')
— user2428118 2013年
「oField.focus（）」のアイデアは何ですか？この線がなくても動作します。入力でブラーイベントを使用し、その関数をコールバック内で実行する場合は注意してください。
— キリル・レズニコフ2015
IEでテストしていますか？ifセクションはIEでのみ実行されます。IEにはグローバルセレクションしかありdocument.selectionませんfield.selection。そのため、そうではありません。また、IE 7では（8+以降でも可能かどうかわからない）何かを選択してから、選択を失うことなくフィールドからTABを実行できました。このようにして、テキストが選択されているがフィールドがフォーカスされていないdocument.selection場合、ゼロ選択を返します。このため、このバグの回避策として、を読む前に要素に集中する必要がありdocument.selectionます。
— bezmax
chromeとfirefoxで常に0になる
— Kaushik Thanki
117

マックスに感謝します。

誰かが使用したいのであれば、私は彼の答えの機能をjQueryにラップしました。

(function($) {
    $.fn.getCursorPosition = function() {
        var input = this.get(0);
        if (!input) return; // No (input) element found
        if ('selectionStart' in input) {
            // Standard-compliant browsers
            return input.selectionStart;
        } else if (document.selection) {
            // IE
            input.focus();
            var sel = document.selection.createRange();
            var selLen = document.selection.createRange().text.length;
            sel.moveStart('character', -input.value.length);
            return sel.text.length - selLen;
        }
    }
})(jQuery);
— MarkB29
ソース
3
input = $(this).get(0)と同じではありませんinput = thisか？
— Mic
4
@Micいいえ、jQueryプラグインではありません。プラグインでthisは、完全にラップされたセットを指します。しかし、彼のコードはまだ間違っていますthis.get(0)。ラップされたセットを再ラップしても何も起こらないので、彼のコードはおそらくまだ機能しています。
— Chev
1
これは私に間違った情報を与えます。テキストを入力するときにカーソルの位置を見ていました。これを示す私のフィドルは次のとおり
— fallenreaper
1
入力が数値タイプの場合、Firefoxはinput.selectionStartでNS_ERROR_FAILUREを生成し、それをtry {} catch {}でラップしますか？
— niall.campbell 2014年
関数の使用法を追加すると、新しいミツバチに
— ぴったり
98

非常に簡単

回答を更新しました

使用してくださいselectionStart、それはすべての主要なブラウザと互換性があります。

document.getElementById('foobar').addEventListener('keyup', e => {
  console.log('Caret at: ', e.target.selectionStart)
})
<input id="foobar" />
スニペットを展開

更新：これは、タイプが定義されていない場合、またはtype="text"入力でのみ機能します。

— CommonSenseCode
ソース
2
マウスを使用して位置を変更すると、コンソールに表示されません。それを修正する方法はありますか？
— ユージーンバースキー
3
@EugeneBarskyクリックイベントの新しいイベントリスナーを追加するだけです。.selectionStartプロパティはいつでも確認できます（document.getElementById('foobar').selectionStart）。イベントリスナー内にある必要はありません。
— JJJ 2018
3
すばらしいですが、入力タイプが数値の場合、FirefoxまたはChromeでは機能しません。
— アダムR.グレイ
26

非常に簡単な解決策を得た。検証された結果で次のコードを試してください-

<html>
<head>
<script>
    function f1(el) {
    var val = el.value;
    alert(val.slice(0, el.selectionStart).length);
}
</script>
</head>
<body>
<input type=text id=t1 value=abcd>
    <button onclick="f1(document.getElementById('t1'))">check position</button>
</body>
</html>

私はあなたにfiddle_demoをあげています

— ラジェシュポール
ソース
13
slice比較的高価な操作であり、この「ソリューション」に何も追加しません- el.selectionStartスライスの長さに相当します。返してください。さらに、他のソリューションがより複雑なのは、がサポートしていない他のブラウザを処理するためselectionStartです。
— mpen 2013年
このような変数名のコードで作業しなければならなかった仕事をやめました。
— Michael Scheper、2015年
@Michael Scheper-要素は「el」、値は「val」ですか？それらはかなり一般的です...
— user2782001
6
@ user2782001：間違えた—私の主な関心事は関数名でした。f1「user2782001」と同じくらい意味があります。😉
— マイケルScheper
16

これには素晴らしいプラグインがあります：Caretプラグイン

次に、を使用して位置を取得$("#myTextBox").caret()または設定できます$("#myTextBox").caret(position)

— イェンス・ミケルセン
ソース
1
キャレットプラグインは、入力ではなく
— textarea
4
まあ、私はそれを<input type = "text" id = "myTextBox" />で機能させ、上記のコードを使用しました。
— Jens Mikkelsen
14 
   (function($) {
    $.fn.getCursorPosition = function() {
        var input = this.get(0);
        if (!input) return; // No (input) element found
        if (document.selection) {
            // IE
           input.focus();
        }
        return 'selectionStart' in input ? input.selectionStart:'' || Math.abs(document.selection.createRange().moveStart('character', -input.value.length));
     }
   })(jQuery);
— ジョージ
ソース
10

ここにいくつかの良い答えが掲載されていますが、コードを簡略化してinputElement.selectionStartサポートの確認をスキップできると思います。これはIE8以前（ドキュメントを参照）でのみサポートされているわけではなく、現在のブラウザー使用率の 1％未満です。

var input = document.getElementById('myinput'); // or $('#myinput')[0]
var caretPos = input.selectionStart;

// and if you want to know if there is a selection or not inside your input:

if (input.selectionStart != input.selectionEnd)
{
    var selectionValue =
    input.value.substring(input.selectionStart, input.selectionEnd);
}
— pmrotule
ソース
2

おそらく、カーソルの位置に加えて、選択した範囲が必要です。これは単純な関数です。jQueryも必要ありません。

function caretPosition(input) {
    var start = input[0].selectionStart,
        end = input[0].selectionEnd,
        diff = end - start;

    if (start >= 0 && start == end) {
        // do cursor position actions, example:
        console.log('Cursor Position: ' + start);
    } else if (start >= 0) {
        // do ranged select actions, example:
        console.log('Cursor Position: ' + start + ' to ' + end + ' (' + diff + ' selected chars)');
    }
}

入力が変化したり、マウスがカーソル位置を移動したりするたびに（この場合はjQueryを使用しています）、入力に対してそれを呼び出したいとします.on()。パフォーマンス上の理由から、イベントが発生している場合はsetTimeout()、アンダースコアなどを追加することをお勧めし_debounce()ます。

$('input[type="text"]').on('keyup mouseup mouseleave', function() {
    caretPosition($(this));
});

試してみたい場合のフィドルは次のとおりです。https：//jsfiddle.net/Dhaupin/91189tq7/

— ドーピン
ソース
0 

const inpT = document.getElementById("text-box");
const inpC = document.getElementById("text-box-content");
// swch gets  inputs .
var swch;
// swch  if corsur is active in inputs defaulte is false .
var isSelect = false;

var crnselect;
// on focus
function setSwitch(e) {
  swch = e;
  isSelect = true;
  console.log("set Switch: " + isSelect);
}
// on click ev
function setEmoji() {
  if (isSelect) {
    console.log("emoji added :)");
    swch.value += ":)";
    swch.setSelectionRange(2,2 );
    isSelect = true;
  }

}
// on not selected on input . 
function onout() {
  // الافنت  اون كي اب 
  crnselect = inpC.selectionStart;
  
  // return input select not active after 200 ms .
  var len = swch.value.length;
  setTimeout(() => {
   (len == swch.value.length)? isSelect = false:isSelect = true;
  }, 200);
}
<h1> Try it !</h1>
    
		<input type="text" onfocus = "setSwitch(this)" onfocusout = "onout()" id="text-box" size="20" value="title">
		<input type="text" onfocus = "setSwitch(this)"  onfocusout = "onout()"  id="text-box-content" size="20" value="content">
<button onclick="setEmoji()">emogi :) </button>
スニペットを展開

— オマール・バクシュ
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.