Para insertar texto en el área de texto/cuadro de entrada en la posición actual del cursor, necesitamos obtener la posición actual del cursor. Así que aquí el enfoque para obtener la posición actual del cursor.
- Primero, obtenga la posición actual del cursor con la ayuda de la propiedad llamada selectionStart en textarea/inputbox.
- Para insertar el texto en la posición dada, usaremos la función de división para dividir la string en dos partes y luego agregaremos ambas partes al texto (text_to_insert) al frente y al final del texto.
Sintaxis:
// will give the current position of the cursor
document.getElementById("id").selectionStart;
// will get the value of the text area
let x= $('#text1').val();
// will get the value of the input box
let text_to_insert=$('#insert').val();
// setting the updated value in the text area
$('#text1').val(x.slice(0,curPos)+text_to_insert+x.slice(curPos));
Ejemplo:
javascript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width,
initial-scale=1.0" />
<script src=
"https://code.jquery.com/jquery-3.5.1.min.js"
integrity=
"sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous">
</script>
<title>Document</title>
</head>
<body>
<textarea rows="4"
id="text1"
cols="50">
</textarea>
<input type="text"
id="insert" />
<button onclick="setTextToCurrentPos()">
Insert at current position
</button>
<script>
function setTextToCurrentPos() {
var curPos =
document.getElementById("text1").selectionStart;
console.log(curPos);
let x = $("#text1").val();
let text_to_insert = $("#insert").val();
$("#text1").val(
x.slice(0, curPos) + text_to_insert + x.slice(curPos));
}
</script>
</body>
</html>
Producción:
Salida: 1
Después de hacer clic en el botón Insertar en la posición actual
Explicación:
Aquí, un método escrito llamado setTextToCurrentPos. Al hacer clic en Insertar en la posición actual , se llamará a este método.
//document.getElementById('text1').selectionStart;
esta línea nos da la posición actual/posición inicial del cursor.
Ejemplo: soy un desarrollador
Si nuestro cursor se coloca justo antes del desarrollador. luego devolverá 7. Entonces, como se muestra en el código usando el método de corte, podemos insertar el texto en la posición actual del cursor.
sea x= $(‘#texto1’).val(); // obtendrá el valor del área de texto
let text_to_insert=$(‘#insertar’).val(); // obtendrá el valor del cuadro de entrada
$(‘#text1’).val(x.slice(0, curPos)+text_to_insert+x.slice(curPos));// establecer el valor actualizado en el área de texto
Publicación traducida automáticamente
Artículo escrito por hunny_chawla y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA