1 Reply Latest reply on May 28, 2015 1:14 PM by CPedrick

    Set tab index on input fields

    CPedrick

      I have four user input fields that I have created by putting a text element on the stage and then adding code like the following for each one on the Stage compositionReady:

      //Set up Amount entry box

      Amt.html("");

      txtAmt = $('<input />').attr({'type':'text', 'value':'', 'id':'Amt'});

      txtAmt .css ('font-size', 14);

      txtAmt .css ('width', 100);

      txtAmt .appendTo(Amt);

       

      //Set up Term entry box

      term.html("");

      txtTerm = $('<input />').attr({'type':'text', 'value':'', 'id':'term'});

      txtTerm .css ('font-size', 14);

      txtTerm .css ('width', 100);

      txtTerm .appendTo(term);

       

      I have four input boxes set up like this, one above the other down the stage. They work just fine. The user can enter a number and I can pick it up programmatically;

       

      The problem is that I need the user to be able to tab down through the input boxes in sequence.

      But the tab stops seem to work backwards. They tab UP rather than DOWN. So if, for example, I am in the second of the four boxes and hit tab, the focus jumps to the box above, rather than the box below.

       

      I tried going to the Accessibility section in the Properties of each text element and setting the Tab Index. That makes the tab move in the right direction, but I have to tab twice to move from one box to the next. (It seems like it is tabbing to the text element and then tabbing to the input box associated with that text element instead of just going to the input box.)

       

      A lot of my users like tabbing around forms, so I really need to get this figured out. All suggestions gratefully accepted.

       

      Thanks!

      Carolyn

        • 1. Re: Set tab index on input fields
          CPedrick Level 1

          I still don't know why the tab index can not apparently be set to work properly via EA, but I have figured out a workaround. Posting here to assist others.

           

          When setting up the input boxes, add the line below to set the tab index using jquery.

           

          //Set up Amount entry box

          Amt.html("");

          txtAmt = $('<input />').attr({'type':'text', 'value':'', 'id':'Amt'});

          txtAmt .css ('font-size', 14);

          txtAmt .css ('width', 100);

          txtAmt .attr ('tabindex', 1);

          txtAmt .appendTo(Amt);

           

          //Set up Term entry box

          term.html("");

          txtTerm = $('<input />').attr({'type':'text', 'value':'', 'id':'term'});

          txtTerm .css ('font-size', 14);

          txtTerm .css ('width', 100);

          txtTerm .attr ('tabindex', 2);

          txtTerm .appendTo(term);