1 2 Previous Next 19 Replies Latest reply on Jun 12, 2013 6:22 AM by LT.ora

    make enter key work as tab in Tabular Form

    LT.ora

      from the thread :make enter key work as tab in apex

       

      got the code :

       

      $(document).ready(function() {
      $('input').keydown( function(e) {
              var key = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0;
              if(key == 13) {
                  e.preventDefault();
                  var inputs = $(this).closest('form').find(':input:visible');
                  inputs.eq( inputs.index(this)+ 1 ).focus();
              }
          });
      });
      

      This works fine on tabular forms if there are existing records
      but as soon as I hit [ Add Rows ]
      hitting enter does not move the cursor
      on Select controls too cursor doesn't work


       

        • 1. Re: make enter key work as tab in Tabular Form
          VC

          You just need to modify the code to use an live/on to make it work for the inputs created on the fly (eg. Add Rows)


          What apex version you are using?


          $(document).ready(function () {
            $(':input').live("keydown", (function (e) {
            var key = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0;
            if (key == 13) {
            e.preventDefault();
            var inputs = $(this).closest('form').find(':input:visible');
            inputs.eq(inputs.index(this) + 1).focus();
            }
            }));
          });
          
          • 3. Re: make enter key work as tab in Tabular Form
            VC

            The above should work for you

            • 4. Re: make enter key work as tab in Tabular Form
              LT.ora

              Could you help me with some hinting please

              • 5. Re: make enter key work as tab in Tabular Form
                Tyson Jouglet

                Help us help you with some hinting please. Please do not reply with "it doesn't work". What error are you receiving? What happens when you press enter? what happens when you press tab? where did you put that code?

                 

                Edit

                If you are using firefox with firebug, chrome, or ie8+ press f12 to open the dev tools and navigate to the console tab. do you see any errors there?

                 

                Tyson

                • 6. Re: make enter key work as tab in Tabular Form
                  Sc0tt

                  VC wrote:

                   

                  You just need to modify the code to use an live/on to make it work for the inputs created on the fly (eg. Add Rows)


                  What apex version you are using?


                  1. $(document).ready(function () { 
                  2.   $(':input').live("keydown", (function (e) { 
                  3.   var key = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0
                  4.   if (key == 13) { 
                  5.   e.preventDefault(); 
                  6.   var inputs = $(this).closest('form').find(':input:visible'); 
                  7.   inputs.eq(inputs.index(this) + 1).focus(); 
                  8.   } 
                  9.   })); 
                  10. }); 

                  Isn't live deprecated in favor of "on"?  http://api.jquery.com/live/

                   

                  In fact it says it is removed in 1.9, so you should probably stop using it now.

                  1 person found this helpful
                  • 7. Re: make enter key work as tab in Tabular Form
                    Tyson Jouglet

                    Astute observation Scott. delegating to the document should net the same result as using live. Seeing how this is only targeting inputs it is PROBABLY safe to target the apex form and save a few steps in the propagation of the events from the inputs. But then again sometimes if a region is used in a modal dialog you can have issues with that. If you want the same result as live then this should work. The reason this is different than live is that it allows you to pick the object which will handle the propagated events instead of always defaulting to the document.

                     

                    $(document).ready(function () {
                      $(':input').delegate(document,"keydown", (function (e) {
                      var key = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0;
                      if (key == 13) {
                      e.preventDefault();
                      var inputs = $(this).closest('form').find(':input:visible');
                      inputs.eq(inputs.index(this) + 1).focus();
                      }
                      }));
                    });
                    

                     

                    Good Luck,

                    Tyson

                    1 person found this helpful
                    • 8. Re: make enter key work as tab in Tabular Form
                      LT.ora

                      Thanks a Lot Tyson,Scott,Vikram,

                       

                      The previous script didn't work on Select controls now that issue is solved (thank you)

                      &

                      This script $(':input').delegate(document,"keydown", (function (e) {  works fine on tabular forms if there are existing records

                      but as soon as I hit [ Add Rows ]

                      hitting enter does not move the cursor to the newly added rows (no error)

                       

                      WOW Works BRILLIANTLY On IE, Chrome & FF

                      the only thing that remains in moving through newly added rows

                      • 9. Re: make enter key work as tab in Tabular Form
                        VC

                        Sc0tt wrote:

                         

                        VC wrote:

                         

                        You just need to modify the code to use an live/on to make it work for the inputs created on the fly (eg. Add Rows)


                        What apex version you are using?


                        1. $(document).ready(function () { 
                        2.   $(':input').live("keydown", (function (e) { 
                        3.   var key = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0
                        4.   if (key == 13) { 
                        5.   e.preventDefault(); 
                        6.   var inputs = $(this).closest('form').find(':input:visible'); 
                        7.   inputs.eq(inputs.index(this) + 1).focus(); 
                        8.   } 
                        9.   })); 
                        10. }); 

                        Isn't live deprecated in favor of "on"?  http://api.jquery.com/live/

                         

                        In fact it says it is removed in 1.9, so you should probably stop using it now.

                        Yes it was deprecated and replaced by on

                        In APEX 4.2 jquery is 1.7.x so we have to use

                        $(document).ready(function () {
                          $(':input').on("keydown", (function (e) {
                          var key = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0;
                          if (key == 13) {
                          e.preventDefault();
                          var inputs = $(this).closest('form').find(':input:visible');
                          inputs.eq(inputs.index(this) + 1).focus();
                          }
                          }));
                        });
                        
                        
                        
                        • 10. Re: make enter key work as tab in Tabular Form
                          VC

                          LTaura,

                           

                          In additional to my above reply you need to slightly modify the code to make it work for new rows!

                           

                          Try this

                          $(document).ready(function () {
                          //select tabular form by ID and apply for all input elements
                              $('#YOUR_TABULAR_FORM_REGION_STATIC_ID').on("keydown", 'input', (function (e) {
                                      var key = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0;
                                      if (key == 13) {
                                          e.preventDefault();
                                          var inputs = $(this).closest('form').find(':input:visible');
                                          inputs.eq(inputs.index(this) + 1).focus();
                                      }
                                  }));
                          });
                          
                          • 11. Re: make enter key work as tab in Tabular Form
                            LT.ora

                            Thanks Vikram, That's wonderfull,

                            I'm JQuery Beginer please help me

                            how to use the script in master detail page

                             

                              $(':input').delegate(document,"keydown", (function (e) {

                             

                              $('#MyTabularForm').on("keydown", 'input', (function (e) {

                            • 12. Re: make enter key work as tab in Tabular Form
                              VC

                              Just give a value to the Region Static ID of your tabular form region, and use that value to replace YOUR_TABULAR_FORM_REGION_STATIC_ID


                              OR setup an example on apex.oracle.com

                              • 13. Re: make enter key work as tab in Tabular Form
                                LT.ora

                                Hi Vikram

                                 

                                please have a look at the following link

                                http://apex.oracle.com/pls/apex/f?p=10037:6

                                demo/1234

                                go to dept 10 and [add row]

                                hitting enter does not navigate

                                to the newly added rows 

                                $(':input').delegate(document,"keydown", (function (e) {
                                

                                 

                                and when i write script for the tabular form using (TABULAR_FORM_REGION_STATIC_ID)

                                is doesn't work for the master form fields (dept)

                                • 14. Re: make enter key work as tab in Tabular Form
                                  Tyson Jouglet

                                  Ltaura,

                                   

                                  Looking at your application you used the following code:

                                   

                                  $(':input').on("keydown", (function (e) {
                                  
                                  

                                   

                                  The problem here is that 1. you are binding to every input and 2. the task of handling the event was not delegated to an element that will always be present on your page and is an ancestor of the tabular form inputs added by the "Add Row" button.

                                   

                                  Edit your tabular form region and set the region attribute called static id to a meaningful value e.g. "EMP_REPORT". Now that the region has a static id and will be the same no matter where the page is copied or which environment the application is used, you can now reference that id without worry that it will change. The bonus here is that it is an ancestor of the input items that will be generated by the "Add Row" button and the keydown events will propagate to it.

                                   

                                  after you change your static region id you can do the following:

                                  $(document).ready(function () { 
                                  $('#EMP_REPORT').on("keydown",':input', (function (e) { 
                                    var key = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0; 
                                    if (key == 13) { 
                                      e.preventDefault(); 
                                      var inputs = $(this).closest('form').find(':input:visible'); 
                                      inputs.eq(inputs.index(this) + 1).focus(); 
                                    } 
                                  }));
                                  });
                                  
                                  

                                   

                                  Edit: Added document.ready in case that was not clear it was needed.

                                  1 2 Previous Next