Put cursor at the end of an input

Assume that we have a text field representing the full name of an user. There is also a Edit button for updating the full name.

<input type="text" id="fullName" />

<button id="edit">Edit</button>

There is a common requirement that clicking the Edit button will focus on the text field, and move the cursor to the end of it:

const fullNameEle = document.getElementById('fullName');
const editEle = document.getElementById('edit');

editEle.addEventListener('click', function (e) {
    // Focus on the full name element
    fullNameEle.focus();

    // Move the cursor to the end
    const length = fullNameEle.value.length;
    fullNameEle.setSelectionRange(length, length);
});

Demo

Put cursor at the end of an input

Put cursor at the end of an input

Demo

See also