prefacio
Cuando encuentre una escena, necesita algunas etiquetas de texto, haga clic para agregarlas automáticamente en el cuadro de texto, luego debe dominar cómo obtener y establecer la posición del cursor en el cuadro de entrada, hacer un registro y registrar el método de uso .
obtener la posición del cursor
Hay un atributo selectionStart en el dominio de la entrada para obtener la posición inicial del cursor, y un atributo selectionEnd es la posición final.
Cuando el cursor solo se selecciona en una determinada posición , los dos valores son iguales y el valor es un número. El cursor comienza a la izquierda del primer carácter en la entrada como 0, y entre el primer carácter y el el segundo carácter es 1, y así sucesivamente. analogía.
Cuando el cursor selecciona una determinada sección de texto , estos dos valores obtienen la posición del anverso y reverso del texto seleccionado respectivamente, y el número de posición aún se obtiene en el formulario anterior.
Dos puntos a tener en cuenta:
-
SelectionStart y selectionEnd predeterminados en 0 hasta que la entrada esté inicialmente desenfocada.
-
Si el cursor selecciona una posición o un fragmento de texto y luego pierde el foco, selectionStart y selectionEnd siguen siendo los resultados de la selección antes de perder el foco .
<body>
<input id="box" value="111"/>
<button onclick="test()">
获取光标位置
</button>
<script>
function test() {
const input = document.getElementById('box')
console.log(input.selectionStart,input.selectionEnd)
}
</script>
</body>
复制代码establecer la posición del cursor
La función setSelectionRange en la entrada se utiliza para establecer la posición del cursor.
Recuerde dejar que la entrada se enfoque antes de establecer el enfoque. Si no está enfocado, no habrá cursor.
Se deben pasar dos parámetros, uno de inicio y otro de fin, si se ponen el mismo número se puede seleccionar la posición fija, si se pone dos números equivale a seleccionar el texto entre las dos posiciones con el ratón
También hay un tercer parámetro de entrada que puede establecer la dirección ("hacia adelante" | "hacia atrás" | "ninguno"), por ejemplo, hacia atrás puede comenzar a contar posiciones de atrás hacia adelante.
<body>
<input id="box"/>
<button onclick="test()">
获取光标位置
</button>
<button onclick="test2()">
设置光标位置为第一个字符与第二个字符之间
</button>
<script>
function test() {
const input = document.getElementById('box')
console.log(input.selectionStart)
}
function test2(index) {
const input = document.getElementById('box')
input.focus()
input.setSelectionRange(1, 2)
}
</script>
</body>
复制代码palabras finales
Si cree que el artículo es útil para usted, haga clic en Me gusta y recójalo. Si tiene algún error o sugerencia, puede dejar un mensaje, gracias ~