This discussion is archived
14 Replies Latest reply: Jun 19, 2012 2:55 AM by 944260 RSS

Move to the next inputtext with the ENTER key instead of TAB

650597 Newbie
Currently Being Moderated
I want the enter key to function like the TAB key in the table layout of a form (to skip to the next field). This is so the user kan use the num-pad with the right hand en the left hand to mark the position on the paper form they are working with. I am also fine if one of the arrow keys works like this.
Any ideas on how to accomplish this?

Regards, Wouter
  • 1. Re: Move to the next inputtext with the ENTER key instead of TAB
    487442 Expert
    Currently Being Moderated
    Hi Wouter,

    You'll need a client listener to do that (assuming 11g here). The code should look like:
    function myOnkeyPress(componentEvent)
    {
        var evt = componentEvent.getNativeEvent();
        var keyCode = AdfAgent.AGENT.getKeyCode(evt);  
    
        if (AdfAgent.AGENT.getKeyCode(evt) == 13) // 13 is ENTER
        {
            AdfFocusUtils.focusNextTabStop(componentEvent.getNativeEventTarget());
        }
    }
    If you need to apply that behavior to all your input then you'll have to hook UIComponent creation in Application class. I explain how to achieve this on the 11g Technical Preview forum (Re: Add clientListener dynamically?


    Regards,

    ~ Simon
  • 2. Re: Move to the next inputtext with the ENTER key instead of TAB
    650597 Newbie
    Currently Being Moderated
    That looks quite usefull

    I need to apply this to all input-texts from one column in a table layout.

    I use Jdeveloper version 10.1.3.2.0, does this work for 10.x as well?

    Edited by: Wouter on Oct 30, 2008 4:05 AM
  • 3. Re: Move to the next inputtext with the ENTER key instead of TAB
    Frank Nimphius Employee ACE
    Currently Being Moderated
    Hi,

    no. The clientListener is a JDeveloper 11 feature. In your case you will have to register a key pressed event on the fields when the page loads. Use document.getElementById() to access the textfields and set the javascript event. In the referenced JavaScript function, evaluate the keyBoard key and if its char value is 13, call focus on the next filed in the row

    Frank
  • 4. Re: Move to the next inputtext with the ENTER key instead of TAB
    650597 Newbie
    Currently Being Moderated
    This I can manage, but what code do I need in the function to skip to the next field?
  • 5. Re: Move to the next inputtext with the ENTER key instead of TAB
    487442 Expert
    Currently Being Moderated
    Hi,

    You'll need something like the following with 10g:
    function focusNext(form, elemName, evt) {
        evt = (evt) ? evt : event;
        var charCode = (evt.charCode) ? evt.charCode :
            ((evt.which) ? evt.which : evt.keyCode);
        if (charCode == 13) {
            form.elements[elemName].focus();
            return false;
        }
        return true;
    }
    
    onkeypress="return focusNext(this.form, 'name2', event)"
    Regards,

    ~ Simon
  • 6. Re: Move to the next inputtext with the ENTER key instead of TAB
    650597 Newbie
    Currently Being Moderated
    I've stripped the code to the bare essentials and firefox reports the error 'focusNext is not defined'

    I cant find the problem. Any suggestions?

    <html>
    <head>
    <script type="text/javascript">
    function focusNext(me, evt) {
    evt = (evt) ? evt : event;
    var charCode = (evt.charCode) ? evt.charCode : ((evt.which) ? evt.which : evt.keyCode);
    if (charCode == 13) {
    var next="";
    var words=me.id.split(":");
    for (i=0; i != words.length; i++)
    {
    if (i=0)
    {next=words[i];}
    elseif (i=1)
    {next=next + ":" + (words[i].toInt + 1);}
    else
    {next=next + ":" + words[i];}

    this.form.elements[next].focus();
    return false;
    }
    }
    return true;
    }
    </script>
    </head>
    <body>
    <table>
    <tr>
    <td>
    <input id="AanbiedingsRegelsTable:0:AanbiedingsRegelsAantal" name="AanbiedingsRegelsTable:0:AanbiedingsRegelsAantal"
    onkeypress="return focusNext(this, event)"
    class="x8" size="4"
    type="text"></input>
    </td>
    </tr>
    <tr>
    <td>
    <input id="AanbiedingsRegelsTable:1:AanbiedingsRegelsAantal" name="AanbiedingsRegelsTable:1:AanbiedingsRegelsAantal"
    onkeypress="return focusNext(this, event)"
    class="x8" size="4"
    type="text"></input>
    </td>
    </tr>
    <tr>
    <td>
    <input id="AanbiedingsRegelsTable:2:AanbiedingsRegelsAantal" name="AanbiedingsRegelsTable:2:AanbiedingsRegelsAantal"
    onkeypress="return focusNext(this, event)"
    class="x8" size="4"
    type="text"></input>
    </td>
    </tr>
    </table>
    </body>
    </html>
  • 7. Re: Move to the next inputtext with the ENTER key instead of TAB
    487442 Expert
    Currently Being Moderated
    Hi,

    Your code looks alright, I'll ponder a bit about it today, but atm I must say that I'm befuddled.


    Regards,

    ~ Simon
  • 8. Re: Move to the next inputtext with the ENTER key instead of TAB
    Frank Nimphius Employee ACE
    Currently Being Moderated
    Hi,

    couple of typos and a wrong int parsing.
    <html>
    <head>
    <script type="text/javascript">
    function focusNext(me, evt) {
    evt = (evt) ? evt : event;
    var charCode = (evt.charCode) ? evt.charCode : ((evt.which) ? evt.which : evt.keyCode);
    if (charCode == 13) {
    var next="";
    var words=me.id.split(":");
    
    for (i=0; i != words.length; i++)
    {
         if (i==0)
              {next=words[0];}
              
         else if (i==1)
              {next=next + ":" + (1+parseInt(words[1]));}
              
         else
              {next=next + ":" + words[2];}
     
     }
          alert(next);
          field = document.getElementById(next);
         field.focus();
    
    }
    return true;
    }
    
    </script>
    </head>
    <body>
    <table>
    <tr>
    <td>
    <input id="AanbiedingsRegelsTable:0:AanbiedingsRegelsAantal" name="AanbiedingsRegelsTable:0:AanbiedingsRegelsAantal"
    onkeypress="return focusNext(this, event)"
    class="x8" size="4"
    type="text"></input>
    </td>
    </tr>
    <tr>
    <td>
    <input id="AanbiedingsRegelsTable:1:AanbiedingsRegelsAantal" name="AanbiedingsRegelsTable:1:AanbiedingsRegelsAantal"
    onkeypress="return focusNext(this, event)"
    class="x8" size="4"
    type="text"></input>
    </td>
    </tr>
    <tr>
    <td>
    <input id="AanbiedingsRegelsTable:2:AanbiedingsRegelsAantal" name="AanbiedingsRegelsTable:2:AanbiedingsRegelsAantal"
    onkeypress="return focusNext(this, event)"
    class="x8" size="4"
    type="text"></input>
    </td>
    </tr>
    </table>
    </body>
    </html>
    Frank
  • 9. Re: Move to the next inputtext with the ENTER key instead of TAB
    650597 Newbie
    Currently Being Moderated
    Frank, Thanks. This works.

    But...

    I'm afraid it only works in Firefox, not in IE. And over here, it's supposed to work in IE.

    I don't know how to get this to work in IE. (btw, it's not a big problem if the code only works in IE)
  • 10. Re: Move to the next inputtext with the ENTER key instead of TAB
    Frank Nimphius Employee ACE
    Currently Being Moderated
    Hi,

    it works for me in IE7. I don't have IE6 installed, so cannot verify this on the older version

    Frank
  • 11. Re: Move to the next inputtext with the ENTER key instead of TAB
    650597 Newbie
    Currently Being Moderated
    You're right, the code above works in IE7. The problem is though, that in my (Jheadstart generated) application the exact same code (among other stuff) doesn't work in IE, but it does in Firefox. This puzzles me big time. Maybe some Jheastart script screws it up in IE
  • 12. Re: Move to the next inputtext with the ENTER key instead of TAB
    650597 Newbie
    Currently Being Moderated
    I traced the problem to a JHeadstart line of code (a hidden inputtext with the name event) wich I will adress in the Jheadstart formum.

    Thanks for the help, this code is fine!

    Wouter
  • 13. Re: Move to the next inputtext with the ENTER key instead of TAB
    Eelse Newbie
    Currently Being Moderated
    Hi,

    the blocking hidden input field seems to be generated by the af:form tag, or perhaps is generated by Common10_1_3_2_0.js. So it doesn't look like a jHeadstart thing as much as a jDeveloper/ADF thing.

    Anyway, changing our own event handling javascript function from
    function focusNext(e) {
        
       if (!e) {
          var e = window.event;
       }
     
    ...
    to
    function focusNext(e) {
        
       if(window.event!=(void 0)) {
          e=window.event;
       }
     
    ...
    did the trick; it is all working properly now. Could it possibly have something to do with the name/id the blocking generated inputfield has, 'event'? Possibly IE sees it as a keyword where Firefox for instance does not?

    Anyway: thanks for your input, also on behalf of my colleague Wouter ;)

    Greetings,
    Eelse
  • 14. Re: Move to the next inputtext with the ENTER key instead of TAB
    944260 Newbie
    Currently Being Moderated
    Hi Simon,

    I am beginners, can you tell me more detail how to set the function "myOnkeyPress"
    in an application ?

    I am using JDeveloper 11.1.2.2.0 and Jheadstart 11.1.2.1.28.


    Regards,
    Liem Tat Seng

Legend

  • Correct Answers - 10 points
  • Helpful Answers - 5 points