Focus onload but keep Backspace intact
Posted on 12 September 2008 (05:26 PM)
A lot of websites try to help you by auto-focusing on an input field on pageload, so you can start typing right away.
Well, thanks so much, you guys couldn't be more helpful.
Except of course that I always use the Backspace key to move back in my history. By focusing on a form field you're essentially disabling some fundamental browser functionality.
While the whole topic of auto-focusing on a form field is debatable, I have to admit that, yes, sometimes it can be helpful (think Google, where all you do is searching). But every time a site breaks my Backspace key I grunt in discomfort.
So, web developers around the world, please, if you want to use a similar script in the future, use something along the lines of this:
window.onload = function () {// focus on the input field for easy access...var input = document.getElementById ('focusme');input.focus ();// ...but if someone wishes to go back in their history, let them!document.onkeydown = function (e) {if (!e) {var e = window.event;}if (e.keyCode === 8 && !input.value) {history.back();}};};- Download this code: /code/focus_onload_but_keep_backspace_intact1.txt
What this script does, is it focuses on the input field, but attaches an onkeydown event handler to the document, that makes the user travel back in their history whenever Backspace is hit and the input field is empty.
Obviously, it can be extended to remove the document event listener whenever someone's actually types in the form field, or something. But whatever you do or however you use this script, use something.
It's the little things that matter in usability, folks.
Filed under HTML and CSS, Javascript, Usability
- ← previous article: Dynamically added form elements lose their margins
- → next article: Generate unique slugs in CakePHP
Comments:
Good advice, thanks!
Great tip! I also get frustrated by this sometimes, and always forget to look for a solution. Now I've found it :).
Any chance for code when user types something and when Backspace is pressed all the way back it doesn't return user back?
this comment has been quoted by Harmen Janssen
You could remove the onkeydown handler of the document when "keydown" on the form field is triggered with anything other than the Backspace key, assuming that if a user types something other that backspace, they probably want to use the form.
Something like:
my_form_field.onkeydown = function (e) {
if (!e) {
var e = window.event;
}
if (e.keyCode !== 8) {
document.onkeydown = null;
/* cancel bubble here, so the event doesn't end up in the document */
}
}
Try if that works out for you, if not I'll update the article :)
Used this code:
window.onload = function () {
// focus on the input field for easy access...
var input = document.getElementById ('focusme');
input.focus ();
// ...but if someone wishes to go back in their history, let them!
document.onkeydown = function (e) {
if (!e) {
var e = window.event;
}
if (e.keyCode !== 8 ) {
document.onkeydown = null;
}
};
};
But it didn't worked. Am I doing something wrong?
The onkeydown event must also be added to the form field, as in my example.
After you use 'document.onkeydown = null', you have to cancel bubbling. For more information on event bubbling, try this page: http://www.quir...ents_order.HTML
Great post. I'll have to review your technique. I didn't even realize some browsers use backspace as a back button. IE does, do any others?
this comment has been quoted by Harmen Janssen
As far as I know all browsers support this; Firefox, Safari and Chrome do :)
Ah, well, I just played with your technique, mooified it, and came to the conclusion that I won't be using it for good reasons. See http://www.nkut...ckspace-intact/ if you want to know more. Basically, I only focus fields when it makes sense and pre-fill them with some default values. This technique doesn't work then.
But who knows, maybe some day I'll find a site where it makes sense.
Btw, my Firefox on Linux doesn't do the backspace back in history thing, could be something in my config though.
this comment has been quoted by Harmen Janssen
You're article makes sense, and thanks for incorporating it in Mootools :)
The most annoying cases where this script would've helped are sites that want you to register/login, when all I want to do is just browse a bit. They focus on the login/register form on EVERY. SINGLE. PAGE.
The way I browse those sites is this:
- visit a page
- click anywhere
- hit backspace
This bugs me so much it almost makes me want to join ;)
Yeah great, now when I hold backspace to delete my word unless I perfectly time the release it returns to previous page. How about you cancel the behavior once a non-backspace char has been typed?
Also, for all those sites that annoy you due to this focus problem, try alt-left instead of backspace... it does the same thing. The advantage over backspace is that alt-right takes you forward!
this comment has been quoted by Harmen Janssen
Ah, I see what you mean. Removing the behavior entirely is probably the better option indeed.
And yes, I know about Alt-Left (Cmd-Left in my case), but I just happen to somehow always have my Backspace within comfortable reach :)
Although that is nice, I didn't like the functionality, and in firefox for instance the default keybinding for back 1 page is Alt+<LeftArrow> already, so you have backspace used totally normally and Alt+<LeftArrow> for navigation.
-Addy
Using this script is as useful as not using it. It could be a very annoying thing to "history.back();" and you didn't intend to, you just pressed backspace one time more than there were characters in the input field. If you were filing a long form, you focus on the last field, you press backspace, get to the previous page and you now have to start over.
I'm completely surprised that there are multiple users who find the "Backspace-history" keyboard mapping in web browsers useful. It's actually been the bane of my existence since IE 3. I was dissuaded to see that Google Chrome maintains the behavior, albeit customized like your javascript (backspace works with text when the cursor is focused in a box, otherwise it's a browser action).
I personally would love to see the backspace key left to its original intent, for text removal, especially since the alt-left arrow performs the same function with hardly any more muscle exertion. I guess the middle ground would be the ability to enable/disable the behavior via some settings menu, but aren't there enough "settings" already?
Excellent post. Thanks very much for sharing this information.
Thank you very much! This was exactly what I needed and all other solutions did not work the way I wanted.
Success with everything you do,
Michael