Holen Sie sich die Cursorposition in JavaScript
-
Verwenden Sie die Eigenschaften
selectionStartundselectionEnd, um die Cursorposition zu erhalten -
Verwenden Sie die
screenX/Y-Eigenschaften, um die Cursorposition zu erhalten -
Verwenden Sie
clientX/Y, um die Cursorposition zu erhalten -
Verwenden Sie die Eigenschaft
pageX/Y, um den Positionswert des Cursors zu erhalten
JavaScript wurde mit den grundlegenden Positionseigenschaften selectionStart und selectionEnd integriert, wobei wir den Positionswert nur aus dem 0th-Index eines String-Literals abrufen können. Andere Eigenschaften spielen auch eine wichtige Rolle beim Extrahieren der Positionswerte basierend auf Koordinatenmarkierungen.
In diesem Fall kann der Bezugspunkt variieren und führt somit zu unterschiedlichen Werten für unterschiedliche Frames. Der folgende Abschnitt zeigt Beispiele für die Eigenschaften selectionStart und selectionEnd.
Wir werden auch das Arbeitsprinzip für screenX/Y, clientX/Y und pageX/Y betrachten, wo drei Eigenschaften auf Koordinatensystemen basieren. Aber lasst uns zuerst zum Hauptteil springen!
Verwenden Sie die Eigenschaften selectionStart und selectionEnd, um die Cursorposition zu erhalten
Die Eigenschaften selectionStart und selectionEnd sind Lese-/Schreibeigenschaften. Sie können sie entweder mit einem Positionswert definieren oder den Standardwert nehmen, der die Leseoperation durchführt.
Es gibt auch die Eigenschaft getSelectionRange, die explizit die Werte selectionStart und selectionEnd übernimmt und einen bestimmten Bereich von Teilzeichenfolgen ermittelt. Das Spielen mit Saiten ist begrenzt, da sie nur bei einigen bestimmten Attributen funktionieren.
Zum Beispiel input:text, input:textarea, input:password usw. Sie können einen detaillierteren Aspekt in dieser speziellen Dokumentation haben. In dem hier gezeigten Fall zeigen wir nur die Read-Only-Methode für selectionStart.
Wenn es um die Nur-Lese-Konvention geht, verhalten sich selectionStart und selectionEnd ähnlich. Es gibt die Position des Zeichenkettenzeichens aus, das der Cursor passiert hat.
Genauer gesagt ist der Cursor der Cursor vom Typ text, auf den diese Eigenschaften wirken. Wir erhalten also nur die Position des horizontalen Teils und die Berechnung hängt von der Anzahl der Zeichen ab. Lassen Sie uns also überprüfen, wie es funktioniert.
Code-Auszug:
<!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>
Ausgang:
Das selectionEnd würde hier ähnlich funktionieren, also haben wir keine Vorschau hinzugefügt. Sie können versuchen, dasselbe Ergebnis wie die Eigenschaft selectionStart zu sehen. Es ist der schreibgeschützte Abschnitt dieser Eigenschaften.
Verwenden Sie die screenX/Y-Eigenschaften, um die Cursorposition zu erhalten
Bei der Eigenschaft screenX/Y berechnen wir die Position, auf die sich ein Bezugspunkt bezieht. Der Koordinatenwert folgt strikt einem bestimmten Bezugspunkt, um die Position anzuzeigen.
Hier ist die Cursorposition für den Standard-Cursor; Daher verwenden wir das Attribut onmousemove, um die Positionen zu verfolgen. screenX/Y ist eine schreibgeschützte Eigenschaft und folgt dem Referenzpunkt als globale oder gesamte Bildschirmkoordinate. Sehen wir uns das folgende Beispiel an.
Code-Auszug:
<!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>
Ausgang:
Wie zu sehen ist, werden die Koordinatenwerte an der Bewegungsposition des Cursors aktualisiert. Außerdem werden Sie in einem Abschnitt feststellen, dass das Scrollen die Position des Cursors nicht beeinflusst.
Das bedeutet, dass jedes Mal, wenn eine Seite von oben nach unten oder von links nach rechts gescrollt wird, die gesamte Seite eingefroren wird und die Position für diese Instanz des Frames unter Berücksichtigung der Bildschirmgröße berechnet wird.
Verwenden Sie clientX/Y, um die Cursorposition zu erhalten
Der clientX/Y ist ebenfalls eine schreibgeschützte Eigenschaft mit dem Referenzpunkt als Ansichtsfenster. In dieser Hinsicht wird das nach oben und unten gescrollte Ansichtsfenster als Status beibehalten und die Koordinatenwerte werden gemessen.
Genauer gesagt, wenn Sie sich im oberen Bereich Ihrer Seite befinden, wäre der y-Wert 0. Und angeblich haben Sie bis zu 20 Pixel gescrollt, und wenn Sie versuchen, den y-Wert abzurufen, wird er immer noch als 0 angezeigt.
Dies bedeutet, dass nur der Teil, der das Ansichtsfenster einnimmt, berücksichtigt wird.
Code-Auszug:
<!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>
Ausgang:
In dem Teil, in dem wir den obersten Wert (y) der Seite überprüft haben, ergab sich also 0. Und wenn man ein wenig nach unten scrollt, bleibt der Wert 0. Wir können also eine ähnliche Aufgabe für den x-Achsenwert ausführen.
Verwenden Sie die Eigenschaft pageX/Y, um den Positionswert des Cursors zu erhalten
Ähnlich wie screenX/Y und clientX/Y ist auch pageX/Y eine schreibgeschützte Eigenschaft. Aber im Gegensatz zu diesen Eigenschaften berücksichtigt pageX/Y die Dimension der gesamten Seite bei der Berechnung der Werte.
Das heißt, wenn das Darstellungsfenster eine größere Länge hat als das Darstellungsfenster, auf dem der Bildschirm angezeigt wird, zählt die Eigenschaft für die gesamte Dimension der gesamten Seite. So können wir wichtige Abschnitte oder Cursorpositionen durch diese Eigenschaft intuitiver abrufen.
Code-Auszug:
<!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>
Ausgang:
Wie man sehen kann, war der oberste Positionswert der y-Achse 0, wenn wir die Bildlaufleiste nicht gescrollt haben.
Und als wir etwas nach unten gescrollt haben, zeigte der obere Wert den y-Wert als die Anzahl der Pixel, auf die nach unten gescrollt wurde, also 58. So können wir jetzt vergleichend diskutieren, welche Immobilie je nach Arbeitszweck besser geeignet ist.
