Focus Text Input at the End of the Value [SOLVED CROSS BROWSER]

I just saved the world! It didn't notice, so I have to blog about it.

I discovered a super simple, fully cross-browser compatible, solution to focusing a text input at the end of the current value.

I needed to do this as part of the application I am currently working on. The html block, including the search input field, are returned form an ajax call and replace the existing HTML within the specified block. After the ajax call returns and replaces the content it needs to focus the input field at the end of the input value.

Moving the cursor, cross-browser friendly, is always messy. I had been dealing with character codes to clear the field on escape and to submit on the enter key, so I get this idea, 'Why not append the 'character' from the key code for the "END" key onto the input value after focusing it?' If that worked, someone would have done it before. In theory this would be done by appending String.fromCharCode(35) to the current value. Would that move the cursor to the end? I try it, it doesn't work.

My next idea was to just set the value as the "END" key. My thought was that it's not a visible character, so maybe it's a more of an instruction key, so-to-speak, and won't mess things up. I try it, it blanks out the value - not what I wanted, but it was worth a try.

So then I try saving the original value in a variable, then set the value to "END" key (clearing the input as before), then re-set the value to the original value. 'This is nuts!' I'm thinking to myself, 'Why am I even trying this?' but I try it anyway. It worked, wait, what??? Yes, it worked!!! I couldn't believe it. I had to test it a hundred times. It's working solid. Unbelievable. I even put the cursor in the middle of the word and hit enter (triggering the ajax) and it replaces the content block, focuses the input, and the cursor appears at the end right where I want it. This is too cool. I'm in Firefox, I re-test it in Chrome, Safari, both work. This is crazy-good news! I'm thinking, but it's sure to fail in IE, everything cool always fails in IE. I'm on my macbook pro, so I load up my Virtualbox with multiple IE's installed on an old Windows XP instance and I test my code. Low and behold, it works in IE7 and in IE8. I'm astonished! Litterally, my jaw dropped, followed by that irresistible smile of success.

I'm still not entire sure *why* it's actually working. The 'END' key must be sticky in some manner so that when the value is replaced it's inserted in front of the cursor. It doesn't make perfect sense that the cursor would stay at the end of the string following the value being reset by javascript while the input is in focus. There's a lot going on there. But something about it being sticky to the end, and not at a specific character position, is my only guess as to 'why' this works. I'm just flipping happy that it does - and fully cross-browser compatible to boot!

Here's my code sample:

var $t = $("#myinput")  //cache the target so we're not parsing for it multiple times
var oldv = $t.val();  // remember the original value
$t.focus().val(String.fromCharCode(35)).val(oldv);  // focus it, set as 'END' key, reset to original

That's it. A simply awesome solution.