Search code examples
htmljqueryeventsandroid-softkeyboardkeydown

Keydown event for 'Next'


I am using this code to handle keydown event for tab and enter key for an input.

$(document).on('keydown', ".className" , function(e) {
  var keyCode = e.keyCode || e.which; 

  alert(keyCode) // does not work for 'next'

  if (keyCode == 9) { //tab key // does not work for 'next'
    e.preventDefault(); 
    if( $(this).parents('tr').next('tr').length == 0){
     $('.add_info').click();  
    }
    $(this).parents('tr').next('tr').find('input:first').focus();
  }

  if (keyCode == 13) { //enter key
    e.preventDefault(); 
        $('.anotherField').focus();
  }
});

The code for the tab key does not work on a mobile's browser. The numeric keyboard shows up for the .className fields as the input type is number, so it has Next key along with other keys. I tried alert(keyCode) just to get the keycode for Next, but the event does not trigger. Is there anyway I could override the default behavior of the Next key?


Solution

  • I could not find a way to trigger the event for Next, so I tried a workaround.

    The Next focuses on the next element on the page. I set a flag when my input lost focus. When the next element is focused right after this element(if the flag is set) then I trigger the code block for tab (what I intend to do when the tab key is pressed in that input.

    var from_class_name = 0;
    $(document).on('keydown', ".className" , function(e) {
      var keyCode = e.keyCode || e.which; 
    
      if (keyCode == 9) { //tab key // does not work for 'next'
        e.preventDefault(); 
        if( $(this).parents('tr').next('tr').length == 0){
         from_class_name= 0;
         $('.add_info').click();  
        }
        $(this).parents('tr').next('tr').find('input:first').focus();
      }
    
      if (keyCode == 13) { //enter key
        e.preventDefault(); 
        from_class_name= 0;
        $('.anotherField').focus();
      }
    });
    
    
    $('#divid').on('focusout', '.className', function(){
        if( $(this).parents('tr').next('tr').length == 0){
            from_class_name = 1;
        }
    });
    $('.otherelement1, .otherelement2, .otherelement3, .otherelement4').on('focus', function(){
        from_class_name = 0;
    });
    
    $('.nextElement').on('focus', function(){ //element which is focused when 'Next' is used
        if(from_class_name == 1) { // the value is 1 when the .className loses focus and no other fields are focused right after it except .nextElement
            from_class_name = 0;
            $('.add_info').click();
        }
    });