En este artículo, vamos a aprender cómo colocar el cursor al final del texto en un elemento de entrada de texto usando JavaScript.
En primer lugar, vamos a crear un cuadro de entrada de texto donde se dará algún valor y un botón para colocar el cursor al final. Podemos colocar el cursor al final del texto en un elemento de entrada de texto usando diferentes funciones de JavaScript.
Acercarse:
Las funciones de JavaScript que se utilizan son:
- HTMLInputElement.setSelectionRange() : HTMLInputElement.setSelectionRange() es un método que establece las posiciones inicial y final de la selección de texto actual en un elemento <input> o <textarea>.
- Element.createTextRange() : Nos proporciona un rango de texto seleccionado en un formulario de entrada. Un signo de intercalación también se conoce como cursor de texto, que es un indicador en la pantalla para indicar dónde se debe insertar el texto.
- TextRange.collapse() : ayuda a mover el signo de intercalación al principio o al final del rango actual.
- TextRange.moveEnd() : ayuda a mover el final del rango en un número específico de unidades.
- TextRange.moveStart() : Mueve el inicio del rango en un número específico de unidades.
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<body>
<center>
<h1>Put Cursor at End of Input</h1>
<!-- Creating an Input Text Box and
the button to move cursor at the
end of the text-->
<input id="idText" type="text" size="70"
value="Cursor at the End">
<button onclick="PosEnd(idText);">
Put Cursor at end of Text
</button>
</center>
<script>
/* Creating a function called PosEnd
in JavaScript to place the cursor
at the end */
function PosEnd(end) {
var len = end.value.length;
// Mostly for Web Browsers
if (end.setSelectionRange) {
end.focus();
end.setSelectionRange(len, len);
} else if (end.createTextRange) {
var t = end.createTextRange();
t.collapse(true);
t.moveEnd('character', len);
t.moveStart('character', len);
t.select();
}
}
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
