Move Caret to End of Input or Textarea
One of the annoying parts of using the focus method of HTML elements is that they don't move the cursor to the end of INPUT or TEXTAREA elements if they already have content in them. That's probably the last thing a user would want. I was browsing through Stack Overflow when I found this gem: a function that moves the cursor to the end of an INPUT or TEXTAREA on command!
function moveCursorToEnd(el) {
if (typeof el.selectionStart == "number") {
el.selectionStart = el.selectionEnd = el.value.length;
} else if (typeof el.createTextRange != "undefined") {
el.focus();
var range = el.createTextRange();
range.collapse(false);
range.select();
}
}
Simply pass the element to the function above and you'll see the caret move to the end of the element! Caret management in the browser sucks, but this function makes it incredibly easy. Enjoy!
![How to Create a RetroPie on Raspberry Pi – Graphical Guide]()
Today we get to play amazing games on our super powered game consoles, PCs, VR headsets, and even mobile devices. While I enjoy playing new games these days, I do long for the retro gaming systems I had when I was a kid: the original Nintendo...
![Create Namespaced Classes with MooTools]()
MooTools has always gotten a bit of grief for not inherently using and standardizing namespaced-based JavaScript classes like the Dojo Toolkit does. Many developers create their classes as globals which is generally frowned up. I mostly disagree with that stance, but each to their own. In any event...
![Input Incrementer and Decrementer with MooTools]()
Chris Coyier's CSS-Tricks blog is everything mine isn't. Chris' blog is rock star popular, mine is not. Chris prefers jQuery, I prefer MooTools. Chris does posts with practical solutions, I do posts about stupid video-game like effects. If I...
![Google Extension Effect with CSS or jQuery or MooTools JavaScript]()
Both of the two great browser vendors, Google and Mozilla, have Extensions pages that utilize simple but classy animation effects to enhance the page. One of the extensions used by Google is a basic margin-top animation to switch between two panes: a graphic pane...
Brilliant piece of code..!! As always, I really enjoy your nifty scripts and this one made my day.
Many Thanks David.
Hello! Did you know you can also do a slight variation on the
input.value = input.value;hack to make it work cross browser, something like:function focusAtEnd(el) { el.focus(); var s = el.value; el.value = ''; el.value = s; }Thanks for commenting Chris! That will work but occasionally you see the “content flash” which is less than ideal.
Agreed. Plus, I can’t imagine it’s very future proof relying on the behavioiur of the caret when setting the value. Your method is definitely the right way to do it.
What if the user had clicked a very precise word to edit it ? Wont it be annoying to have the cursor at the end of the input when you clicked the beginning ? Maybe this method should only be used when the user is accessing a field with the tab key.
Great snippet, just what I needed, thank you!!!
I don’t believe that this will work in Chrome on
type=numberinputs.Does it also scroll the text left so that the cursor is visible? This is a problem on iOS when the text is longer than the width of the input element.
Thank you.