convert enter to tab, работа со скрытыми полями

Question

У меня есть сценарий, который преобразует «Enter» в «Tab», и он отлично работает, пока я не ударил скрытое поле в форме.

Итак, есть ли способ обнаружить скрытое поле и по-прежнему использовать скрипт (в IE & firefox)?

<script type="text/javascript"> 
    function tabE(obj, e) { 
     var e = (typeof event != 'undefined') ? window.event : e; // IE : Moz 
     if (e.keyCode == 13) { 
      var ele = document.forms[0].elements; 
      for (var i = 0; i < ele.length; i++) { 
       var q = (i == ele.length - 1) ? 0 : i + 1; // if last element : if any other 
       if (obj == ele[i]) { 
        ele[q].focus(); 
        break 
       } 
      } 
      return false; 
     } 
    } 
</script> 

Answer 1

Изменить код выглядеть следующим образом:

<script type="text/javascript"> 
    function tabE(obj, e) { 
     var e = (typeof event != 'undefined') ? window.event : e; // IE : Moz 
     if (e.keyCode == 13) { 
      var ele = document.forms[0].elements; 
      for (var i = 0; i < ele.length; i++) { 
       var q = (i == ele.length - 1) ? 0 : i + 1; // if last element : if any other 
       if (obj == ele[i] && $(ele[q]).is(":visible")) { 
        ele[q].focus(); 
        break 
       } 
      } 
      return false; 
     } 
    } 
</script> 

Я просто добавил проверку, чтобы убедиться, что элементы, которые вы собираетесь сосредоточиться видны (не скрытый).

EDIT: Если вы хотите полностью пропустить скрытые поля, используйте приведенный ниже код.

function tabE(obj, e) { 
    var e = (typeof event != 'undefined') ? window.event : e; // IE : Moz 

    var self = $(obj), 
    form = self.parents('form:eq(0)'), 
    focusable, next; 

    if (e.keyCode == 13) { 
    focusable = form.find('input,a,select,button,textarea').filter(':visible'); 
    next = focusable.eq(focusable.index(obj) + 1); 
    if (!next.length) { 
     next = focusable.first(); 
    } 
    next.focus(); 
    return false; 
    } 
} 

Fiddle:

https://jsfiddle.net/mwatz122/0zqzzmc1/

Answer 2

Мое предложение полный ЯШ:

function tabE(obj, e) { 
 
    var e = (typeof event != 'undefined') ? window.event : e; // IE : Moz 
 
    if (e.keyCode == 13) { 
 
    var ele = document.forms[0].elements; 
 
    for (var i = 0; i < ele.length; i++) { 
 
     var q = (i == ele.length - 1) ? 0 : i + 1; // if last element : if any other 
 
     if (obj == ele[i]) { 
 
     var style = window.getComputedStyle(ele[q]); 
 
     while (style.display == 'none' || style.visibility != 'visible' || ele[q].type == 'hidden') { 
 
      q = (q == ele.length - 1) ? 0 : q + 1; // if last element : if any other 
 
      style = window.getComputedStyle(ele[q]); 
 
     } 
 
     ele[q].focus(); 
 
     break 
 
     } 
 
    } 
 
    return false; 
 
    } 
 
} 
 
window.onload = function() { 
 
    var inp = document.getElementsByTagName("input") 
 
    for(i=0; i<inp.length; i++) { 
 
    inp[i].addEventListener("keyup", function(e) { 
 
     tabE(this, e); 
 
    }); 
 
    } 
 
}

<form> 
 
    First name:<br> 
 
    <input type="text" name="firstname"> 
 
    <br> 
 
    Last name:<br> 
 
    <input type="text" name="lastname"> 
 
    <input type="text" name="myhidden" style="visibility: hidden"> 
 
    <input type="hidden" name="myhidden1"> 
 
    <input type="text" name="myhidden2" style="display: none"> 
 
</form>