Cara menggunakan get cursor position javascript

In this article, we are going to learn about how to place the cursor at end of the text in a text input element using JavaScript.

Table of Contents Show

Using event.clientX Property
Find the coordinates of the cursor with JavaScript
Using event.clientY Property
Find the coordinates of the cursor with JavaScript
Find the coordinates of the cursor with JavaScript

At first, we are going to create a text input box where some value will be given and a button to place the cursor at the end. We can place the cursor at the end of the text in a text input element by using different JavaScript functions.

Approach:

The JavaScript functions that are used are:

HTMLInputElement.setSelectionRange(): The HTMLInputElement.setSelectionRange() is a method that sets the start and end positions of the current text selection in an <input> or <textarea> element.
Element.createTextRange(): It provides us with a selected text range in an input form. A caret is also known as a text cursor which is an indicator on the screen to indicate where the text is to be inserted.
TextRange.collapse(): It helps to move the caret to the beginning or end of the current range.
TextRange.moveEnd(): It helps to move the end of the range by a specified number of units.
TextRange.moveStart(): It moves the start of the range by a specified number of units.

Example: This example shows the above-explained approach.

HTML

<!DOCTYPE html>

<html>

<body>

<center>

<1<<3<4<3>

<7

<1<9

html0html1

html0html3

<1<html6 html7html8html9 >0html8>2 >3html8>5

In this tutorial, we will learn how we can find the coordinates of the mouse cursor with JavaScript. We have to find out the X and Y-coordinates or we can say that the horizontal and the vertical position of the cursor on the screen with JavaScript.

JavaScript provides us with two different properties to get the coordinates of the mouse cursor when the mouse button is pressed anywhere on the screen −

Using event.clientX Property
Using event.clientY Property

Using event.clientX Property

The event.clientX property is used to find out the value of the horizontal position or the X-coordinate of the cursor where the event was triggered. It returns a numeric value that specifies the horizontal position of the cursor.

Syntax

Following is the syntax to get the horizontal position of the cursor −

function function_name(event){
   let X=event.clientX;
}

Steps

Step 1 − In step one, we need to define the callback function that performs some activity when the event triggers.

Step 2 − In the second step, we will declare a variable and assign it a value using event.clientX property, that returns the horizontal or the X-coordinate of the cursor position.

Step 3 − This step contains the statements that are required to display the returned value on the screen that is stored in the variable declared in last step.

Example

Below example illustrates how we can get the X-coordinate of the cursor using JavaScript −

Find the coordinates of the cursor with JavaScript

Click anywhere on the screen to see X-coordinate of the cursor using "event.clientX" property.

In this example, we find out the position of the cursor on X-axis or in horizontal direction using the event.clientX property.

Using event.clientY Property

It is used to find out the position of the cursor in the vertical direction or on the Y-axis where the event was triggered. Similar to the event.clientX property, it also returns a numeric value that holds the position of the cursor on the Y-axis or Y-coordinate.

Syntax

Following is the syntax to use event.clientY property to get the Y-coordinate of cursor using JavaScript −

function function_name(event){
   let Y=event.clientY;
}

Steps

Step 1 − In step one, we will define the callback function that performs some activity on the webpage when the event triggers.

Step 2 − In second step, we will declare a variable and assign it a value using the event.clientY property, that returns the vertical or the Y-coordinate of the cursor position.

Step 3 − This step includes the statements that are required to display the returned value of the cursor position on the Y-coordinate or in the vertical direction on the screen that is stored in the variable declared in the last step.

Example

Below example illustrates how we can get the X-coordinate of the cursor using JavaScript −

Find the coordinates of the cursor with JavaScript

Click anywhere on the screen to see Y-coordinate of the cursor using "event.clientY" property.

In this example, we have find out the Y-coordinate of the cursor using The event.clientY property of JavaScript.

Let us understand how we can find out the position of the cursor on a 2D plane using both properties in the same example.

Steps

Step 1 − In step one, we will define the callback function that performs some activity on the webpage when the event triggers.

Step 2 − In second step, we will declare two variables and assign them values using the event.clientX and the event.clientY properties, which return the horizontal and the vertical or the X and the Y-coordinates of the cursor position on the screen.

Example

Below example illustrates how we can get the X-coordinate of the cursor using JavaScript −

Find the coordinates of the cursor with JavaScript

Click anywhere on the screen to see X and Y-coordinate of the cursor using JavaScript properties.

In above example, we have used the event.clientX and event.clientY properties simultaneously to find out the position of cursor on 2D plane using JavaScript.

In this tutorial, we have learnt about the JavaScript properties to find out the coordinates of the cursor with help of individual and a example where we used both the properties to find the position of cursor on 2D plane or X and Y-coordinates simultaneously.