webentwicklung-frage-antwort-db.com.de

Cursorposition (in Zeichen) in einem Texteingabefeld abrufen

Wie kann ich die Caret-Position in einem Eingabefeld ermitteln?

Ich habe ein paar Kleinigkeiten über Google gefunden, aber nichts kugelsicheres.

Grundsätzlich wäre so etwas wie ein jQuery-Plugin ideal, also könnte ich es einfach machen

$("#myinput").caretPosition()
194
MarkB29

Einfacheres Update:

Verwenden field.selectionStartBeispiel in dieser Antwort .

Vielen Dank an @commonSenseCode für den Hinweis.


Alte Antwort:

Fand diese Lösung. Nicht jquery-basiert, aber es ist kein Problem, es in jquery zu integrieren:

/*
** 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;
}
221
bezmax

Schön, vielen Dank an Max.

Ich habe die Funktionalität in seiner Antwort in jQuery eingeschlossen, wenn jemand sie verwenden möchte.

(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);
115
MarkB29

SEHR LEICHT

Aktualisierte Antwort

Verwenden Sie selectionStart, es ist kompatibel mit allen gängigen Browsern .

document.getElementById('foobar').addEventListener('keyup', e => {
  console.log('Caret at: ', e.target.selectionStart)
})
<input id="foobar" />

Update: Dies funktioniert nur, wenn für die Eingabe kein Typ definiert ist oder type = "text".

72
CommonSenseCode

Habe eine sehr einfache Lösung. Versuchen Sie den folgenden Code mit verifiziertem Ergebnis -

<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>

Ich gebe dir das fiddle_demo

26
Rajesh Paul

Dafür gibt es jetzt ein Nizza-Plugin: Das Caret-Plugin

Dann können Sie die Position mit $("#myTextBox").caret() ermitteln oder mit $("#myTextBox").caret(position) einstellen

14
Jens Mikkelsen
   (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);
14
George

Es gibt hier ein paar gute Antworten, aber ich denke, Sie können Ihren Code vereinfachen und die Prüfung auf inputElement.selectionStart - Unterstützung überspringen: Sie wird nicht nur in IE8 und früheren Versionen unterstützt (siehe Dokumentation ). Dies entspricht weniger als 1% der aktuellen Browser-Nutzung .

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);
}
10
pmrotule

Möglicherweise benötigen Sie zusätzlich zur Cursorposition einen ausgewählten Bereich. Hier ist eine einfache Funktion, Sie brauchen nicht einmal 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)');
    }
}

Angenommen, Sie möchten es auf einem Eingang aufrufen, wenn er sich ändert oder die Maus die Cursorposition verschiebt (in diesem Fall verwenden wir jQuery .on()). Aus Performancegründen kann es sinnvoll sein, setTimeout() oder so etwas wie Underscores _debounce() hinzuzufügen, wenn Ereignisse eingehen:

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

Hier ist eine Geige, wenn Sie es ausprobieren möchten: https://jsfiddle.net/Dhaupin/91189tq7/

2
dhaupin