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 ;)