Obtener la posición del cursor en JavaScript
-
Utilice las propiedades
selectionStartyselectionEndpara obtener la posición del cursor -
Utilice las propiedades
screenX/Ypara obtener la posición del cursor -
Use
clientX/Ypara obtener la posición del cursor -
Utilice la propiedad
pageX/Ypara obtener el valor posicional del cursor
JavaScript se incorporó con la propiedad posicional fundamental selectionStart y selectionEnd, donde solo podemos recuperar el valor posicional del índice 0th de un literal de cadena. Otras propiedades también juegan un papel vital en la extracción de los valores posicionales basados en marcas de coordenadas.
En este caso, el punto de referencia puede variar y, por lo tanto, da como resultado diferentes valores correspondientes a diferentes marcos. La siguiente sección mostrará ejemplos de las propiedades selectionStart y selectionEnd.
También consideraremos el principio de funcionamiento para screenX/Y, clientX/Y y pageX/Y, donde tres propiedades se basan en sistemas de coordenadas. Pero, primero, ¡saltemos a la parte principal!
Utilice las propiedades selectionStart y selectionEnd para obtener la posición del cursor
Las propiedades selectionStart y selectionEnd son propiedades de lectura/escritura. Puede definirlos con un valor posicional o tomar el valor predeterminado, que realiza la operación de lectura.
También existe la propiedad getSelectionRange que toma explícitamente los valores selectionStart y selectionEnd y determina un rango específico de subcadena. Jugar con cadenas está limitado ya que solo funcionan en algunos atributos particulares.
Por ejemplo, entrada:texto, entrada:área de texto, entrada:contraseña, etc. Puede tener un aspecto más detallado en esta documentación en particular. En el ejemplo que se muestra aquí, solo mostraremos el método de solo lectura para selectionStart.
Cuando se habla de la convención de solo lectura, selectionStart y selectionEnd funcionarán de manera similar. Imprime la posición del carácter de cadena que ha pasado el cursor.
En concreto, el cursor es el cursor de tipo texto sobre el que actúan estas propiedades. Y así, solo obtenemos la posición de la parte horizontal, y el cálculo depende de la cantidad de caracteres. Así que vamos a ver cómo funciona.
Fragmento de código:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Get Cursor</title>
</head>
<body>
<input id="Javascript_example" name="one" type="text" value="Javascript example" onmousemove="textbox()">
<p id="vals"></p>
<script>
function textbox(){
var ctl = document.getElementById('Javascript_example');
var startPos = ctl.selectionStart;
document.getElementById('vals').innerText = startPos;
}
</script>
</body>
</html>
Producción:
El selectionEnd funcionaría de manera similar aquí, por lo que no agregamos ninguna vista previa. Puede probar y ver el mismo resultado que la propiedad selectionStart. Es la sección de sólo lectura de estas propiedades.
Utilice las propiedades screenX/Y para obtener la posición del cursor
En el caso de la propiedad screenX/Y, calculamos la posición referida por un punto de referencia. El valor de la coordenada sigue estrictamente un determinado punto de referencia para mostrar la posición.
Aquí, la posición del cursor es para el cursor predeterminado; por lo tanto, usaremos el atributo onmousemove para rastrear las posiciones. La pantallaX/Y es una propiedad de solo lectura, y sigue el punto de referencia como la coordenada global o de toda la pantalla. Veamos el ejemplo a continuación.
Fragmento de código:
<!DOCTYPE html>
<html>
<head>
<title>Get Cursor</title>
</head>
<body>
<p>Move your mouse to see its position.</p>
<p id="screen-log" style="height:900px;width:600px; text-align:center"></p>
</body>
<script>
let screenLog = document.querySelector('#screen-log');
document.addEventListener('mousemove', logKey);
function logKey(e) {
screenLog.innerText = `
Screen X/Y: ${e.screenX}, ${e.screenY}`;
}
</script>
</html>
Producción:
Como puede verse, los valores de las coordenadas se actualizan en la posición de movimiento del cursor. Además, en una sección, notará que el desplazamiento no afecta la posición del cursor.
Significa que cada vez que una página se desplaza hacia arriba, hacia abajo o de izquierda a derecha, toda la página se congela y calcula la posición para esa instancia del marco teniendo en cuenta el tamaño de la pantalla.
Use clientX/Y para obtener la posición del cursor
El clientX/Y también es una propiedad de solo lectura con el punto de referencia como ventana gráfica. En este sentido, la ventana de visualización desplazada hacia arriba y hacia abajo se mantiene intacta y se miden los valores de las coordenadas.
Más claramente, si estás en la sección superior de tu página, entonces el valor de y sería 0. Y supuestamente, se ha desplazado hacia abajo hasta 20 píxeles, y si intenta recuperar el valor y, aún se mostrará como 0.
Significa que cualquier parte que esté ocupando la ventana gráfica, solo se tiene en cuenta.
Fragmento de código:
<!DOCTYPE html>
<html>
<head>
<title>Get Cursor</title>
</head>
<body>
<p>Move your mouse to see its position.</p>
<p id="screen-log" style="height:900px;width:600px; text-align:center"></p>
</body>
<script>
let screenLog = document.querySelector('#screen-log');
document.addEventListener('mousemove', logKey);
function logKey(e) {
screenLog.innerText = `
Client X/Y: ${e.clientX}, ${e.clientY}`;
}
</script>
</html>
Producción:
Entonces, en la parte donde verificamos el valor (y) superior de la página, resultó 0. Y cuando se desplazaba un poco hacia abajo, el valor seguía siendo 0. Entonces, podemos hacer una tarea similar para el valor del eje x.
Utilice la propiedad pageX/Y para obtener el valor posicional del cursor
Al igual que screenX/Y y clientX/Y, pageX/Y también es una propiedad de solo lectura. Pero a diferencia de esas propiedades, pageX/Y considera la dimensión de toda la página al calcular los valores.
Significa que si la ventana gráfica tiene una longitud mayor que la ventana gráfica en la que se proyecta, la propiedad contará para la dimensión total de la página completa. Por lo tanto, podemos obtener secciones importantes o posiciones del cursor de manera más intuitiva a través de esta propiedad.
Fragmento de código:
<!DOCTYPE html>
<html>
<head>
<title>Get Cursor</title>
</head>
<body>
<p>Move your mouse to see its position.</p>
<p id="screen-log" style="height:900px;width:600px; text-align:center"></p>
</body>
<script>
let screenLog = document.querySelector('#screen-log');
document.addEventListener('mousemove', logKey);
function logKey(e) {
screenLog.innerText = `Page X/Y: ${e.pageX}, ${e.pageY}`;
}
</script>
</html>
Producción:
Como se puede visualizar, cuando no hemos desplazado la barra de desplazamiento, el valor de la posición superior del eje y era 0.
Y cuando nos desplazamos un poco hacia abajo, la parte superior mostró el valor y como el número de píxeles que se han desplazado hacia abajo, que es 58. Así que ahora, podemos pasar a una discusión comparativa sobre qué propiedad es más adecuada según el propósito del trabajo.
