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:

  1. window.onload = function () {
  2. // focus on the input field for easy access...
  3. var input = document.getElementById ('focusme');
  4. input.focus ();
  5. // ...but if someone wishes to go back in their history, let them!
  6. document.onkeydown = function (e) {
  7. if (!e) {
  8. var e = window.event;
  9. }
  10. if (e.keyCode === 8 && !input.value) {
  11. history.back();
  12. }
  13. };
  14. };
  15. 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.

See this page for an example.

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.

Back to top

Filed under HTML and CSS, Javascript, Usability

Comments:

  1. 17 September 2008 (04:54 PM) by Thorsten

    Good advice, thanks!

  2. 18 September 2008 (12:29 AM) by Ivan Nikolic

    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

  3. 18 September 2008 (11:55 AM) by Harmen Janssen

    Ivan Nikolic wrote:

    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?

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

  4. 22 September 2008 (10:54 PM) by Ivan Nikolic

    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?

  5. 23 September 2008 (01:06 PM) by Harmen Janssen

    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

  6. 24 September 2008 (06:35 PM) by nkuttler

    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

  7. 24 September 2008 (09:58 PM) by Harmen Janssen

    nkuttler wrote:

    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?

    As far as I know all browsers support this; Firefox, Safari and Chrome do :)

  8. 02 October 2008 (11:51 AM) by nkuttler

    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

  9. 02 October 2008 (01:27 PM) by Harmen Janssen

    nkuttler wrote:

    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.nkuttler.de/2008/10/02/mooified-focus-onload-but-keep-backspace-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.

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

  10. 16 December 2008 (09:27 AM) by Assmunch

    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

  11. 16 December 2008 (10:49 AM) by Harmen Janssen

    Assmunch wrote:

    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!

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

  12. 16 December 2008 (12:09 PM) by Addy Gronquist

    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

  13. 20 December 2008 (08:02 AM) by Tom

    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.

  14. 22 December 2008 (04:40 AM) by Frank

    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?

  15. 01 March 2009 (02:35 PM) by David Chambers

    Excellent post. Thanks very much for sharing this information.

  16. 13 June 2009 (10:08 PM) by Michael

    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

  17. 07 July 2010 (10:57 AM) by S7

    Details make the difference! Thanks

  18. 03 December 2010 (03:59 AM) by yujiayao

    Our titanium rings containing diamonds .35ct or smaller, the diamond is guaranteed forever against loss. If your ring loses a diamond, simply return it to us for a free replacement. For details visit Our Guarantee page.

    What a fascinating story! Thanks for sharing this!

  19. 07 January 2011 (02:39 AM) by Chanel Handbags

    What a fun pattern! It's great to hear from you and see what you've sent up to. All of the projects look great! You make it so simple to this.Thanks!

    So great , I like it

  20. 07 January 2011 (02:39 AM) by ED Hardy

    Iíve been looking everywhere for this! Thank goodness I found it on Bing.Thx

  21. 07 January 2011 (02:40 AM) by Nike pas cher

    Very happy to see your article, I very much to like and agree with your point of view. Thank you for sharing. At the same time,i love best pram very much .Welcome to look at my website and blog articles.Hope we can become good friends, and exchange and to help each other! Thanks!!

  22. 15 January 2011 (07:33 AM) by careprost

    Hey there,

    Really nice job, There are many people searching about that now they will find enough sources by your tips.

    Also looking forward for more tips about that

  23. 15 January 2011 (07:50 AM) by designer handbags

    wow all those garments are so amazing and fabulous I don't come to your blog as often as I would like, but whenever I do I see some really amazing things keep up the good work! =)

  24. 20 January 2011 (07:13 AM) by cheap oakley sunglasses

    Intriguing web site. My co-workers and I had been just discussing this the other evening. Also your web page seems to be exceptional on my aged sidekick. Now thats uncommon. Wonderful do the job.

  25. 09 February 2011 (04:50 AM) by Cheap Jordan Shoes Online

    Thanks for sharing your article. I really enjoyed it.

  26. 10 February 2011 (06:40 AM) by iphone cases

    Nice topic and post, as we were just talking about what things can happen in the medicine industry.

  27. 11 February 2011 (06:55 AM) by Air Max 90 pas cher

    Many thanks to the person who made this post, this was very informative for me. Please continue this awesome work. Sincerely...

    The article is very well!

  28. 11 February 2011 (06:55 AM) by ED Hardy

    Iíve been looking everywhere for this! Thank goodness I found it on Bing.Thx

  29. 11 February 2011 (06:56 AM) by Chanel Handbags

    Very happy to see your article, I very much to like and agree with your point of view. Thank you for sharing. At the same time,i love best pram very much .Welcome to look at my website and blog articles.Hope we can become good friends, and exchange and to help each other! Thanks!!

  30. 11 February 2011 (03:33 PM) by Cheap Michael Jordan Shoes Online

    Thanks for sharing your article. I really enjoyed it.

  31. 15 February 2011 (07:56 AM) by small pellet mill

    What a fascinating story! Thanks for sharing this!

    The article is very well!

  32. 16 February 2011 (07:09 AM) by north face jackets

    Read this article, I was very inspired, really appreciate it.

  33. 17 February 2011 (06:54 AM) by tiffany outlet

    very useful information and i have found it for a long time,thanks so much.

  34. 17 February 2011 (06:55 AM) by tiffany outlet

    very useful information and i have found it for a long time,thanks so much.

  35. 18 February 2011 (03:06 AM) by yiwu

    It's a nice post!Thanks for your good work,it helps me a lot!I will come back again!

Sorry, due to spam, comments are temporarily out of order.

Back to top

Preferences

These settings will be saved for your convenience.