TabIndex.Next on Enter

https://stackoverflow.com/questions/7208161/focus-next-element-in-tab-index

by eapo

HTML

<form><table>
 <thead><tr><th>&nbsp;</th><th class="ga-2014">2014</th><th class="ga-2015">2015</th><th class="ga-2016">2016</th> </tr></thead>
<tbody>
 <tr><td>Nettó árbevétel</td><td><div><input type="text"></div></td><td><div><input type="text"></div></td><td><div><input type="text"></div></td> </tr>
 <tr><td>Befektetett eszközök</td><td><div><input type="text"></div></td><td><div><input type="text"></div></td><td><div><input type="text"></div></td> </tr>
 <tr><td>Saját tőke</td><td><div><input type="text"></div></td><td><div><input type="text"></div></td><td><div><input type="text"></div></td> </tr>
 <tr><td>Személyi jellegű ráfordítások</td><td><div><input type="text"></div></td><td><div><input type="text"></div></td><td><div><input type="text"></div></td> </tr>
 <tr><td>Eredménytartalék</td><td><div><input type="text"></div></td><td><div><input type="text"></div></td><td><div><input type="text"></div></td> </tr>
 <tr><td>Mérleg szerinti eredmény</td><td><div><input type="text"></div></td><td><div><input type="text"></div></td><td><div><input type="text"></div></td> </tr>
 <tr><td>Átlagos statisztikai állományi létszám</td><td><div><input type="text"></div></td><td><div><input type="text"></div></td><td><div><input type="text"></div></td> </tr>
</tbody>
</table></form>

JavaScript

function focusNextElement() {
  var focussableElements = 'a:not([disabled]), button:not([disabled]), input[type=text]:not([disabled]), [tabindex]:not([disabled]):not([tabindex="-1"])';
  if (document.activeElement && document.activeElement.form) {
    var focussable = Array.prototype.filter.call(document.activeElement.form.querySelectorAll(focussableElements),
      function(element) {
        return element.offsetWidth > 0 || element.offsetHeight > 0 || element === document.activeElement
      });
    var index = focussable.indexOf(document.activeElement);
    focussable[index + 1].focus();
  }
}

window.addEventListener('keydown', function(e) {
  if (e.keyIdentifier == 'U+000A' || e.keyIdentifier == 'Enter' || e.keyCode == 13) {
    if (e.target.nodeName === 'INPUT' && e.target.type !== 'textarea') {
      e.preventDefault();
      focusNextElement();
      return false;
    }
  }
}, true);