Weiß jemand, wie man den Tastatur-Cursor in einem Textfeld an eine bestimmte Position verschiebt?
Wenn ein Textfeld (z. B. ein Eingabeelement, kein Textbereich) beispielsweise 50 Zeichen enthält und ich den Cursor vor Zeichen 20 positionieren möchte, wie würde ich vorgehen?
Dies steht in Abgrenzung zu dieser Frage: jQuery Cursor-Position im Textbereich festlegen die jQuery erfordert.
Wenn Sie ein Textfeld fokussieren müssen und Ihr einziges Problem darin besteht, dass der gesamte Text hervorgehoben wird, während Sie möchten, dass die Einfügemarke am Ende steht, dann können Sie in diesem speziellen Fall diesen Trick anwenden, indem Sie den Wert des Textfeldes nach dem Fokus auf sich selbst setzen:
$("#myinputfield").focus().val($("#myinputfield").val());
Ich würde die Bedingungen wie folgt festlegen:
function setCaretPosition(elemId, caretPos)
{
var elem = document.getElementById(elemId);
if (elem)
{
if (typeof elem.createTextRange != 'undefined')
{
var range = elem.createTextRange();
range.move('character', caretPos);
range.select();
}
else
{
if (typeof elem.selectionStart != 'undefined')
elem.selectionStart = caretPos;
elem.focus();
}
}
}
HTMLInputElement . setSelectionRange( AuswahlStart, AuswahlEnde );
// References
var e = document.getElementById( "helloworldinput" );
// Move caret to beginning on focus
e.addEventListener( "focus", function( event )
{
// References
var e = event.target;
// Action
e.setSelectionRange( 0, 0 ); // Doesn’t work for focus event
window.setTimeout( function()
{
e.setSelectionRange( 0, 0 ); // Works
//e.setSelectionRange( 1, 1 ); // Move caret to second position
//e.setSelectionRange( 1, 2 ); // Select second character
}, 0 );
}, false );Browser-Kompatibilität (nur für die Typen: Text, Suche, URL, Tel und Passwort): https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange#Specifications
<!DOCTYPE html>
<html>
<head>
<title>set caret position</title>
<script type="application/javascript">
//<![CDATA[
window.onload = function ()
{
setCaret(document.getElementById('input1'), 13, 13)
}
function setCaret(el, st, end)
{
if (el.setSelectionRange)
{
el.focus();
el.setSelectionRange(st, end);
}
else
{
if (el.createTextRange)
{
range = el.createTextRange();
range.collapse(true);
range.moveEnd('character', end);
range.moveStart('character', st);
range.select();
}
}
}
//]]>
</script>
</head>
<body>
<textarea id="input1" name="input1" rows="10" cols="30">Happy kittens dancing</textarea>
<p> </p>
</body>
</html> CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.
