Enter Key Press Behaves Like a Tab in JavaScript

Enter key press behaves like a Tab in Javascript

I used the logic suggested by Andrew which is very effective. And this is my version:

$('body').on('keydown', 'input, select', function(e) {
    if (e.key === "Enter") {
        var self = $(this), form = self.parents('form:eq(0)'), focusable, next;
        focusable = form.find('input,a,select,button,textarea').filter(':visible');
        next = focusable.eq(focusable.index(this)+1);
        if (next.length) {
            next.focus();
        } else {
            form.submit();
        }
        return false;
    }
});

KeyboardEvent's keycode (i.e: e.keycode) depreciation notice :- https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode

Make enter key behave like tab key in Javascript

It is an IE only script, so if you try to run it on firefox it wont work.

For it to work on IE, remove "return false;" from your code and dont forget to atach this function into "onkeydown" event.

Enter key acts like tab key doesn't work on tables

UPDATED SOLUTION AFTER GETTING THE OP REQUIREMENT:

The Logic that I have figured out to traverse the input elements as required is as follows.

Just focus on your first input and then keep clicking Enter Key it will focus() on the next Element.

$(document).ready(function(){

    samples();
  function samples(){
  
 
       $('.appendtablee').html('');
       
     
    for (var i = 0; i<5; i++) { // I have used a hard coded value 5 for now (selector us missing)
        var row = '<tr>\
            <td>\
                <label> </label>\
            </td>\
            <td>\
                <input type="text" name="l[]" class="form myInput" id="legBand1" tabindex="0"/>        \
                 <span class="email_result"></span> \
            </td>\
            <td>\
                <input  class="myInput" type="text" data-id="wp"  name="W[]" min="1700" max="2200" tabindex="0"/>        \
            </td>\
            <td>\
            </td>\
        </tr>';
        row = $(row);
        $('.appendtablee').append(row);
    }
  
  
    const textFields = $('.myInput');
    for(let i=0;i<textFields.length;i++) {
        $(textFields[i]).on('keypress',function(e){
            if(e.which==13){ 
              $(textFields[i+1]).focus();
            }
        });   
     
    }
  }

})  

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-bordered" border="1" class="classtable" id="applicanttable">
  <h1> Testing Testing </h1>
     
     <tr>
                <th>#</th>
                <th>B#</th>
                <th>W#</th>
                <th>W #</th>
                <th>Action</th>
             </tr>
     
            <tbody class="appendtablee" id="wew">
            
                   
          </tbody>

How to convert enter key press to tab key press, without submitting form

You can do by the following javascript which are as under:

<script type="text/javascript">
    $(document).ready(function () {
        $("input").not($(":button")).keypress(function (evt) {
            if (evt.keyCode == 13) {
                iname = $(this).val();
                if (iname !== 'Submit') {
                    var fields = $(this).parents('form:eq(0),body').find('button, input, textarea, select');
                    var index = fields.index(this);
                    if (index > -1 && (index + 1) < fields.length) {
                        fields.eq(index + 1).focus();
                    }
                    return false;
                }
            }
        });
    });
</script>

Don't use onkeypress() function just remove it.

Pressing Tab to active Enter key

Although I'm not sure what you're motivation for this behavior is, your logic is even possible with Vanilla JS:

• Simplest way to detect keypresses in javascript
• Is it possible to simulate key press events programmatically?

Minimal example for your use case:

• Click into the input field
• Now press tab
• You will see an alert that tab was pressed
• Immediately after, you will see that enter was pressed as well (programmatically)

let element = document.querySelector('input');
element.onkeydown = e => {
  alert('key pressed: ' + e.key);
  if (e.key === 'Tab') {
    element.dispatchEvent(
      new KeyboardEvent('keydown', {
        'key': 'enter'
      }));
  }
}

<input/>

---

Related Topics