Jump with Enter key

Discussion in 'HTML & Website Design' started by piropeator, Jun 21, 2016.

  1. #1
    Hi. I want to know, is possible to jump from one field to another field in the form with enter key?
    I am using HTML5/CSS3 with bootstrap.
    Or is necessary to use javascript?
     
    piropeator, Jun 21, 2016 IP
  2. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #2
    Uh, that's what the [tab] key does. Why would you want to overrule default behavior?

    gary
     
    kk5st, Jun 21, 2016 IP
  3. piropeator

    piropeator Well-Known Member

    Messages:
    194
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    121
    #3
    It is a requirement of end users. Is very fast in a massive wordk with forms with many inputs. For that.
     
    piropeator, Jun 21, 2016 IP
  4. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #4
    OK, end users do ask for a lot of things of marginal use or of massive stupid. If you can't dissuade them from this silliness (a touch typist won't be slowed by using the [tab] key, and a non-touch typist isn't fast enough to notice anyway), you probably will need to use javascript to capture [enter] and map it to [tab]. Don't forget the cascading issues; mapping back-tab [shift-tab] for example and mapping a new key or key combo to [enter].

    If you need help on that, post the query to the javascript forum.

    cheers,

    gary
     
    kk5st, Jun 21, 2016 IP
    sarahk likes this.
  5. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #5
    I would say that if this is an open website, where anybody can use it, don't do it. If it's a closed page, where you have control over all the users (like an in-house web-app, for instance), go ahead. However, when I use a form on a webpage, I expect pressing enter to send the form. Having it jump to the next input would just be annoying. As Gary said, that's why we have tab, and seriously, also as Gary said, there is NO DIFFERENCE between using TAB instead of ENTER (they're approximately the same distance from where your hands should be when touch-typing on a regular keyboard). HOWEVER - if this is mainly a site used by mobile/tablet users, where you often don't have a tab-key readily available on the keyboard (because people are too stupid to actually change the default keyboard to something usable), then perhaps I can understand it - however, you should be very aware that this is breaking standards, and will confuse people unless (as said before) you have 100% control over who uses the site, or plaster it with instructions before use.
     
    PoPSiCLe, Jun 21, 2016 IP
    kk5st likes this.
  6. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #6
    And we all know how well people read and follow instructions, Right?

    BTW, good points.
     
    kk5st, Jun 21, 2016 IP
    sarahk likes this.
  7. piropeator

    piropeator Well-Known Member

    Messages:
    194
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    121
    #7
    Well, this form is only internal use. And the the application is for use on pc only.
     
    piropeator, Jun 22, 2016 IP
  8. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #8
    Well, then, you can do this with javascript. You'll need to catch the pressing of enter, prevent it from sending the form (return false or preventdefault or whatever you need depending on what type of javascript you'll be using), and make it focus the next input (normally you'd do this by counting up 1 on the tabindex and tab to that, but you can, as long as you have tabindex on the input fields, just catch the tabindex on the input you're currently on and increase that number by 1 - or, do it simpel and just focus the next input, regardless of tabindex or whatever).
     
    PoPSiCLe, Jun 22, 2016 IP