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

More

Previous
Print an image
Next
Remove all children of a node