{"id":5332,"date":"2013-05-23T02:00:00","date_gmt":"2013-05-23T00:00:00","guid":{"rendered":"https:\/\/alvarotrigo.com\/epa\/move-cursor-to-end-input\/"},"modified":"2024-02-08T00:28:46","modified_gmt":"2024-02-07T23:28:46","slug":"move-cursor-to-end-input","status":"publish","type":"post","link":"https:\/\/alvarotrigo.com\/blog\/move-cursor-to-end-input\/","title":{"rendered":"Move cursor to the end of input [JavaScript]"},"content":{"rendered":"

You can move the cursor to the end of an input or a textarea by using selectionStart<\/code> and selectionEnd<\/code> properties of input elements using JavaScript.<\/strong><\/p>\n

These kind of things might seem simple but can be a bit tricky. So let’s clear this out and see what’s the best way of achieving this.<\/p>\n

This can be done with both jQuery or JavaScript, but there’s very little difference between the two so I usually recommend making use of JavaScript.<\/p>\n

Using JavaScript<\/h2>\n

This way is very similar to the previous one using jQuery but using sectionEnd<\/code> and sectionStart<\/code> properties of the input.<\/p>\n

function<\/span> moveCursorToEnd<\/span>(e<\/span>) <\/span>{\n    setTimeout(function<\/span>(<\/span>)<\/span>{\n        const<\/span> input = document<\/span>.querySelector('#my-input'<\/span>);\n        input.selectionStart = input.selectionEnd = input.value.length;\n        input.focus();\n    }, 0<\/span>)\n}\n\ndocument<\/span>.querySelector('#move'<\/span>).addEventListener('click'<\/span>, moveCursorToEnd);\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Notice that we are also using setTimeout<\/code>. The reason for it is that Chrome has some bug which causes the focus event to get fired before the cursor is moved into the input.<\/p>\n\n