using arrows instead of mouse in html form to navigate inputs

Question

Hello every one I have a few simple html forms that i made for my mum so she can keep a record of the condition of her houses but recently her osteoporosis has made it very difficult for her to use a mouse.

She has asked me if there is a way that i could add a feature to my forms so that she can just use the arrow keys to move from one input box to the next and select from drop down boxes.

Is this possible to implement in a simplistic way or is it quite advanced ?

The forms are nothing special im in just about to start my second year at uni and i covered html for 6 months so my knowledge is limited. Here is the link to the forms i made for her so you have an idea of what i mean.

my form website "its made to fit on mobiles but i have made better sites that use JS to redirect to a mobile css and use meta tags, again this one is basic"

Could someone some me how this could be done with a form please :).

Many thanks from edd

0_O lol i did not know that thanks pal , well at least there is one easy way, but as i posted it is there any script or function that i could add. — edwin, Aug 09 '16 at 12:07
As @J.Titus said, you can always jump to the next input using `TAB`. You can even go back using `SHIFT + TAB`. When you enter a dropdown, you can already use the `UP` and `DOWN` keys to select values. It's not a good idea to overwrite the arrow keys anyway, because in most browsers you can scroll the page with them (horizontally as well as vertically. — insertusernamehere, Aug 09 '16 at 12:10
Javascript Example to Handle TAB and TAB+SHIFT http://www.freakyjolly.com/navigate-form-field-link-elements-using-tab-and-shifttab-keys-in-webpage/ — Code Spy, Jul 24 '18 at 04:53

score 5 · Answer 1 · edited May 23 '17 at 12:22

The Tab key does this using the tabindex HTML attribute. Mimic this for arrows presses if you want too by binding an event for the arrow keys and putting a arrow-togglable class on each element you want to toggle between:

    var elements = document.getElementsByClassName("arrow-togglable");
    var currentIndex = 0;

    document.onkeydown = function(e) {
      switch (e.keyCode) {
        case 38:
          currentIndex = (currentIndex == 0) ? elements.length - 1 : --currentIndex;
          elements[currentIndex].focus();
          break;
        case 40:
          currentIndex = ((currentIndex + 1) == elements.length) ? 0 : ++currentIndex;
          elements[currentIndex].focus();
          break;
      }
    };

input { margin: 5px 0; }

<input type="text" class="arrow-togglable"><br/>
<input type="text" class="arrow-togglable"><br/>
<input type="text" class="arrow-togglable">

score 0 · Answer 2 · answered Aug 09 '16 at 12:13

To expand on my comment - she can use the TAB key or SHIFT+TAB to go backwards, and you can edit the form to set up a certain order of elements using tabindex.

Start in the middle element and use TAB and SHIFT+TAB to see how it works:

<label>2</label><input tabindex="2" />
<label>1</label><input tabindex="1" />
<label>3</label><input tabindex="3" />

score 0 · Answer 3 · answered Aug 09 '16 at 17:51

0

Thank you nick that works perfectly :), the javascript is understanderable, i have not used currentindex so i shall learn more about it, thank you again Nick.

answered Aug 09 '16 at 17:51

edwin

181
2
10

This should be not an answer. please use comment instead of answer – Yohanim Oct 23 '19 at 17:44

using arrows instead of mouse in html form to navigate inputs

3 Answers3