JavaScript - How to Place Cursor at End of Text in Text Input Field?

JavaScript - How to Place Cursor at End of Text in Text Input Field?

Last Updated : 26 Nov, 2024

Here are the various methods to place cursor at the end of text in text input field in JavaScript

Using HTMLInputElement.setSelectionRange() Method

The setSelectionRange() method is the most basic way to move the cursor within a text input or textarea. It allows you to set the start and end positions of the current text selection. To place the cursor at the end, you can set both the start and end positions to the length of the text.

<!DOCTYPE html>
<html>

<head>
    <title>Place Cursor at End of Text Input</title>
</head>

<body>
    <input type="text" id="myInput" value="Hello, world!" />
    <button onclick="moveCursorToEnd()">Place Cursor at End</button>
</body>
<script>
    function moveCursorToEnd() {
        const input = document.getElementById('myInput');
        const length = input.value.length;
        // Focus on the input
        input.focus();
        // Set the cursor to the end
        input.setSelectionRange(length, length);
    }
</script>

</html>

Output

Output

JavaScript - How to Place Cursor at End of Text in Text Input Field?

D

dassohom5

Improve

Article Tags :

Similar Reads

How to Adjust the Width of Input Field Automatically using JavaScript?

The <input> element in HTML is used to create interactive controls for forms, allowing users to input data. It is one of the most versatile elements, with various input types and attributes that make it powerful for building forms. One important attribute is the width attribute, which allows y

How to insert text into the textarea at the current cursor position?

To insert text into the textarea/inputbox at the current cursor position we need to get the current position of the cursor. So here the approach to get the current position of the cursor. First, get the current position of cursor with the help of property named as selectionStart on textarea/inputbox

How to Set Cursor Position in Content-Editable Element using JavaScript?

To set the cursor position in content-editable elements, such as a div tag, you can use the JavaScript Range interface. A range is created using the document.createRange() method.Approach:First, create a Range and set the position using the above syntax.Get user input from the input tag using jQuery

How to append an text message when an input field is modified in jQuery ?

In this article, we will see how to append an element with a text message when an input field is changed in jQuery. To append an element with a text message when the input field is changed, change() and appendTo() methods are used. The change() method is used to detect the change in the value of inp

How to focus on the next field input in ReactJS ?

To focus on the next field input in ReactJS when the current input field reaches its max character capacity, we have to find the next input HTML element and make it focus. Prerequisites:NPM & Node.jsReact JSHTML InputApproach:To focus on the next input field we will switch the focus to some even