Натискання клавіші Enter поводиться як Tab у Javascript

Question 1

Я прагну створити форму, де натискання клавіші enter змушує фокус перейти до елемента "наступний" на сторінці. Рішення, яке я постійно знаходжу в Інтернеті, це ...

 <body onkeydown="if(event.keyCode==13){event.keyCode=9; return event.keyCode}">

На жаль, це, здається, працює лише в IE. Тож справжнє питання цього питання - якщо хтось знає рішення, яке працює для FF та Chrome? Крім того, я волів би не додавати події onkeydown до самих елементів форми, але якщо це єдиний спосіб, це доведеться зробити.

Це питання схоже на запитання 905222 , але, на мій погляд, воно заслуговує власного запитання.

Редагувати: також я бачив, як люди піднімають проблему, що це не найкращий стиль, оскільки він відрізняється від поведінки форми, до якої звикли користувачі. Я згоден! Це запит клієнта :(

Question 2

Я використав логіку, запропоновану Ендрю, яка є дуже ефективною. І це моя версія:

$('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;
    }
});

e.keycodeПовідомлення про амортизацію KeyboardEvent (тобто :): - https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode

Question 3

Найпростіший ванільний фрагмент JS, який я придумав:

document.addEventListener('keydown', function (event) {
  if (event.keyCode === 13 && event.target.nodeName === 'INPUT') {
    var form = event.target.form;
    var index = Array.prototype.indexOf.call(form, event.target);
    form.elements[index + 1].focus();
    event.preventDefault();
  }
});

Працює в IE 9+ і сучасних браузерах.

Question 4

Призначити клавішу [Enter] для роботи як клавіша [Tab]

Я переписав відповідь Андре Ван Зуйдама , яка мені не спрацювала, у jQuery. Це фіксує як Enterі Shift+ Enter. Enterвкладки вперед і Shift+ Enterвкладки назад.

Я також переписав спосіб selfініціалізації поточним елементом у фокусі. Форма також вибрана таким чином. Ось код:

// Map [Enter] key to work like the [Tab] key
// Daniel P. Clark 2014

// Catch the keydown for the entire document
$(document).keydown(function(e) {

  // Set self as the current item in focus
  var self = $(':focus'),
      // Set the form by the current item in focus
      form = self.parents('form:eq(0)'),
      focusable;

  // Array of Indexable/Tab-able items
  focusable = form.find('input,a,select,button,textarea,div[contenteditable=true]').filter(':visible');

  function enterKey(){
    if (e.which === 13 && !self.is('textarea,div[contenteditable=true]')) { // [Enter] key

      // If not a regular hyperlink/button/textarea
      if ($.inArray(self, focusable) && (!self.is('a,button'))){
        // Then prevent the default [Enter] key behaviour from submitting the form
        e.preventDefault();
      } // Otherwise follow the link/button as by design, or put new line in textarea

      // Focus on the next item (either previous or next depending on shift)
      focusable.eq(focusable.index(self) + (e.shiftKey ? -1 : 1)).focus();

      return false;
    }
  }
  // We need to capture the [Shift] key and check the [Enter] key either way.
  if (e.shiftKey) { enterKey() } else { enterKey() }
});

Причина `textarea`

включений, тому що ми « робимо » хочуть вкладки в нього. Крім того, потрапивши, ми не хочемо зупиняти поведінку за замовчуванням Enterвід введення нового рядка.

Причина `a`і`button`

дозволити дію за замовчуванням, " і " все ще зосереджуватись на наступному елементі, оскільки вони не завжди завантажують іншу сторінку. Може бути тригер / ефект на такі, як акордеон або вміст із вкладками. Отже, як тільки ви активуєте поведінку за замовчуванням, і сторінка зробила свій особливий ефект, ви все одно хочете перейти до наступного елемента, оскільки ваш тригер, можливо, добре ввів його.

Question 5

Це спрацювало для мене:

$(document).on('keydown', ':tabbable', function(e) {

    if (e.key === "Enter") {
        e.preventDefault();

        var $canfocus = $(':tabbable:visible');
        var index = $canfocus.index(document.activeElement) + 1;

        if (index >= $canfocus.length) index = 0;
        $canfocus.eq(index).focus();
    }

});

Question 6

Дякую за хороший сценарій.

Я щойно додав подію shift для вищезазначеної функції, щоб повернутися між елементами, я думав, комусь це може знадобитися.

$('body').on('keydown', 'input, select, textarea', function(e) {
var self = $(this)
  , form = self.parents('form:eq(0)')
  , focusable
  , next
  , prev
  ;

if (e.shiftKey) {
 if (e.keyCode == 13) {
     focusable =   form.find('input,a,select,button,textarea').filter(':visible');
     prev = focusable.eq(focusable.index(this)-1); 

     if (prev.length) {
        prev.focus();
     } else {
        form.submit();
    }
  }
}
  else
if (e.keyCode == 13) {
    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;
}
});

Question 7

Є проблеми з усіма реалізаціями, наведеними тут. Деякі з них не працюють належним чином з текстовими областями та кнопками надсилання, більшість не дозволяють використовувати shift, щоб повернутися назад, жоден з них не використовує табіндекси, якщо вони у вас є, і жоден з них не обертається з останнього на перший чи перший до останнього.

Щоб клавіша [enter] діяла як клавіша [tab], але все одно працювала належним чином із текстовими областями та кнопками подання, використовуйте наступний код. Крім того, цей код дозволяє використовувати клавішу Shift для переходу назад, а вкладки обертаються навпроти спереду і назад.

Вихідний код: https://github.com/mikbe/SaneEnterKey

CoffeeScript

mbsd_sane_enter_key = ->
  input_types = "input, select, button, textarea"
  $("body").on "keydown", input_types, (e) ->
    enter_key = 13
    tab_key = 9

    if e.keyCode in [tab_key, enter_key]
      self = $(this)

      # some controls should just press enter when pressing enter
      if e.keyCode == enter_key and (self.prop('type') in ["submit", "textarea"])
        return true

      form = self.parents('form:eq(0)')

      # Sort by tab indexes if they exist
      tab_index = parseInt(self.attr('tabindex'))
      if tab_index
        input_array = form.find("[tabindex]").filter(':visible').sort((a,b) -> 
          parseInt($(a).attr('tabindex')) - parseInt($(b).attr('tabindex'))
        )
      else
        input_array = form.find(input_types).filter(':visible')

      # reverse the direction if using shift
      move_direction = if e.shiftKey then -1 else 1
      new_index = input_array.index(this) + move_direction

      # wrap around the controls
      if new_index == input_array.length
        new_index = 0
      else if new_index == -1
        new_index = input_array.length - 1

      move_to = input_array.eq(new_index)
      move_to.focus()
      move_to.select()

      false

$(window).on 'ready page:load', ->
  mbsd_sane_enter_key()

JavaScript

var mbsd_sane_enter_key = function() {
  var input_types;
  input_types = "input, select, button, textarea";

  return $("body").on("keydown", input_types, function(e) {
    var enter_key, form, input_array, move_direction, move_to, new_index, self, tab_index, tab_key;
    enter_key = 13;
    tab_key = 9;

    if (e.keyCode === tab_key || e.keyCode === enter_key) {
      self = $(this);

      // some controls should react as designed when pressing enter
      if (e.keyCode === enter_key && (self.prop('type') === "submit" || self.prop('type') === "textarea")) {
        return true;
      }

      form = self.parents('form:eq(0)');

      // Sort by tab indexes if they exist
      tab_index = parseInt(self.attr('tabindex'));
      if (tab_index) {
        input_array = form.find("[tabindex]").filter(':visible').sort(function(a, b) {
          return parseInt($(a).attr('tabindex')) - parseInt($(b).attr('tabindex'));
        });
      } else {
        input_array = form.find(input_types).filter(':visible');
      }

      // reverse the direction if using shift
      move_direction = e.shiftKey ? -1 : 1;
      new_index = input_array.index(this) + move_direction;

      // wrap around the controls
      if (new_index === input_array.length) {
        new_index = 0;
      } else if (new_index === -1) {
        new_index = input_array.length - 1;
      }

      move_to = input_array.eq(new_index);
      move_to.focus();
      move_to.select();
      return false;
    }
  });
};

$(window).on('ready page:load', function() {
  mbsd_sane_enter_key();
}

Question 8

Зміна цієї поведінки насправді створює набагато кращий досвід для користувачів, ніж поведінка за замовчуванням, реалізована власним чином. Врахуйте, що поведінка клавіші enter вже несумісна з точки зору користувача, оскільки в однорядковому введенні enter має тенденцію подавати форму, тоді як у багаторядковій текстовій області він просто додає новий рядок до вмісту поле.

Нещодавно я зробив це так (використовує jQuery):

$('input.enterastab, select.enterastab, textarea.enterastab').live('keydown', function(e) {
 if (e.keyCode==13) {
  var focusable = $('input,a,select,button,textarea').filter(':visible');
  focusable.eq(focusable.index(this)+1).focus();
  return false;
 }
});

Це не дуже ефективно, але працює досить добре і надійно - просто додайте клас 'enterastab' до будь-якого елемента введення, який повинен поводитися таким чином.

Question 9

Я переробив рішення OPs у прив'язку Knockout і думав поділитися ним. Дуже дякую :-)

Ось скрипка

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js" type="text/javascript"></script>


</head>
<body>

    <div data-bind="nextFieldOnEnter:true">
        <input type="text" />
        <input type="text" />
        <select>
          <option value="volvo">Volvo</option>
          <option value="saab">Saab</option>
          <option value="mercedes">Mercedes</option>
          <option value="audi">Audi</option>
        </select>
        <input type="text" />
        <input type="text" />
    </div>


    <script type="text/javascript">
    ko.bindingHandlers.nextFieldOnEnter = {
        init: function(element, valueAccessor, allBindingsAccessor) {
            $(element).on('keydown', 'input, select', function (e) {
                var self = $(this)
                , form = $(element)
                  , focusable
                  , next
                ;
                if (e.keyCode == 13) {
                    focusable = form.find('input,a,select,button,textarea').filter(':visible');
                    var nextIndex = focusable.index(this) == focusable.length -1 ? 0 : focusable.index(this) + 1;
                    next = focusable.eq(nextIndex);
                    next.focus();
                    return false;
                }
            });
        }
    };

    ko.applyBindings({});
    </script>
</body>
</html>

Question 10

Ось директива angular.js, щоб змусити enter перейти до наступного поля, використовуючи інші відповіді як натхнення. Тут є якийсь, можливо, дивний код, оскільки я використовую лише jQlite, упаковану з angular. Я вважаю, що більшість функцій тут працюють у всіх браузерах> IE8.

angular.module('myapp', [])
.directive('pdkNextInputOnEnter', function() {
    var includeTags = ['INPUT', 'SELECT'];

    function link(scope, element, attrs) {
        element.on('keydown', function (e) {
            // Go to next form element on enter and only for included tags
            if (e.keyCode == 13 && includeTags.indexOf(e.target.tagName) != -1) {
                // Find all form elements that can receive focus
                var focusable = element[0].querySelectorAll('input,select,button,textarea');

                // Get the index of the currently focused element
                var currentIndex = Array.prototype.indexOf.call(focusable, e.target)

                // Find the next items in the list
                var nextIndex = currentIndex == focusable.length - 1 ? 0 : currentIndex + 1;

                // Focus the next element
                if(nextIndex >= 0 && nextIndex < focusable.length)
                    focusable[nextIndex].focus();

                return false;
            }
        });
    }

    return {
        restrict: 'A',
        link: link
    };
});

Ось як я використовую його в додатку, над яким працюю, просто додавши pdk-next-input-on-enterдирективу до елемента. Я використовую сканер штрих-коду для введення даних у поля, функцією сканера за замовчуванням є емуляція клавішної дошки, введення ключа введення після введення даних відсканованого штрих-коду.

У цього коду є один побічний ефект (позитивний для мого варіанту використання). Якщо він перемістить фокус на кнопку, подія введення клавіші введення спричинить активацію дії кнопки. Це дуже добре спрацювало для мого потоку, оскільки останнім елементом форми у моїй розмітці є кнопка, яку я хочу активувати, як тільки всі поля будуть "вкладені" шляхом сканування штрих-кодів.

<!DOCTYPE html>
<html ng-app=myapp>
  <head>
      <script src="angular.min.js"></script>
      <script src="controller.js"></script>
  </head>
  <body ng-controller="LabelPrintingController">
      <div class='.container' pdk-next-input-on-enter>
          <select ng-options="p for p in partNumbers" ng-model="selectedPart" ng-change="selectedPartChanged()"></select>
          <h2>{{labelDocument.SerialNumber}}</h2>
          <div ng-show="labelDocument.ComponentSerials">
              <b>Component Serials</b>
              <ul>
                  <li ng-repeat="serial in labelDocument.ComponentSerials">
                      {{serial.name}}<br/>
                      <input type="text" ng-model="serial.value" />
                  </li>
              </ul>
          </div>
          <button ng-click="printLabel()">Print</button>
      </div>
  </body>
</html>

Question 11

У мене була подібна проблема, коли я хотів натиснути +на цифровій клавіатурі, щоб перейти на наступне поле. Зараз я випустив бібліотеку, яка, думаю, вам допоможе.

PlusAsTab : плагін jQuery для використання клавіші numpad plus як еквівалента клавіші табуляції.

Оскільки ви хочете enter/ ↵замість цього, ви можете встановити параметри. Дізнайтеся, який ключ ви хочете використовувати з jQuery event.which демо .

JoelPurra.PlusAsTab.setOptions({
  // Use enter instead of plus
  // Number 13 found through demo at
  // https://api.jquery.com/event.which/
  key: 13
});

// Matches all inputs with name "a[]" (needs some character escaping)
$('input[name=a\\[\\]]').plusAsTab();

Ви можете спробувати це самостійно в демонстрації вкладки PlusAsTab як вкладку .

Question 12

У мене це працює лише на JavaScript. Firefox не дозволить вам оновити keyCode, тому все, що ви можете зробити, - це захопити keyCode 13 і змусити його зосередитись на наступному елементі за допомогою tabIndex так, ніби було натиснуто keyCode 9. Хитра частина полягає у пошуку наступного tabIndex. Я протестував це лише на IE8-IE10 та Firefox, і це працює:

function ModifyEnterKeyPressAsTab(event)
{
    var caller;
    var key;
    if (window.event)
    {
        caller = window.event.srcElement; //Get the event caller in IE.
        key = window.event.keyCode; //Get the keycode in IE.
    }
    else
    {
        caller = event.target; //Get the event caller in Firefox.
        key = event.which; //Get the keycode in Firefox.
    }
    if (key == 13) //Enter key was pressed.
    {
        cTab = caller.tabIndex; //caller tabIndex.
        maxTab = 0; //highest tabIndex (start at 0 to change)
        minTab = cTab; //lowest tabIndex (this may change, but start at caller)
        allById = document.getElementsByTagName("input"); //Get input elements.
        allByIndex = []; //Storage for elements by index.
        c = 0; //index of the caller in allByIndex (start at 0 to change)
        i = 0; //generic indexer for allByIndex;
        for (id in allById) //Loop through all the input elements by id.
        {
            allByIndex[i] = allById[id]; //Set allByIndex.
            tab = allByIndex[i].tabIndex;
            if (caller == allByIndex[i])
                c = i; //Get the index of the caller.
            if (tab > maxTab)
                maxTab = tab; //Get the highest tabIndex on the page.
            if (tab < minTab && tab >= 0)
                minTab = tab; //Get the lowest positive tabIndex on the page.
            i++;
        }
        //Loop through tab indexes from caller to highest.
        for (tab = cTab; tab <= maxTab; tab++)
        {
            //Look for this tabIndex from the caller to the end of page.
            for (i = c + 1; i < allByIndex.length; i++)
            {
                if (allByIndex[i].tabIndex == tab)
                {
                    allByIndex[i].focus(); //Move to that element and stop.
                    return;
                }
            }
            //Look for the next tabIndex from the start of page to the caller.
            for (i = 0; i < c; i++)
            {
                if (allByIndex[i].tabIndex == tab + 1)
                {
                    allByIndex[i].focus(); //Move to that element and stop.
                    return;
                }
            }
            //Continue searching from the caller for the next tabIndex.
        }

        //The caller was the last element with the highest tabIndex,
        //so find the first element with the lowest tabIndex.
        for (i = 0; i < allByIndex.length; i++)
        {
            if (allByIndex[i].tabIndex == minTab)
            {
                allByIndex[i].focus(); //Move to that element and stop.
                return;
            }
        }
    }
}

Щоб використовувати цей код, додайте його у свій тег вводу html:

<input id="SomeID" onkeydown="ModifyEnterKeyPressAsTab(event);" ... >

Або додайте його до елемента в javascript:

document.getElementById("SomeID").onKeyDown = ModifyEnterKeyPressAsTab;

Ще кілька приміток:

Мені він потрібен був лише для роботи з моїми елементами введення, але ви можете розширити його на інші елементи документа, якщо вам потрібно. Для цього getElementsByClassName дуже корисний, але це вже зовсім інша тема.

Обмеження полягає в тому, що він здійснює лише вкладки між елементами, які ви додали до свого масиву allById. У ньому немає вкладки до інших речей, які може мати ваш браузер, таких як панелі інструментів та меню за межами вашого HTML-документа. Можливо, це особливість замість обмеження. Якщо хочете, захопіть keyCode 9, і ця поведінка також буде працювати з клавішею табуляції.

Question 13

Ви можете використовувати мій код нижче, протестований у Mozilla, IE та Chrome

   // Use to act like tab using enter key
    $.fn.enterkeytab=function(){
         $(this).on('keydown', 'input, select,', function(e) {
        var self = $(this)
          , form = self.parents('form:eq(0)')
          , focusable
          , next
          ;
            if (e.keyCode == 13) {
                focusable = form.find('input,a,select,button').filter(':visible');
                next = focusable.eq(focusable.index(this)+1);
                if (next.length) {
                    next.focus();
                } else {
                    alert("wd");
                    //form.submit();
                }
                return false;
            }
        });

    }

Як користуватись?

$ ("# форма"). enterkeytab (); // ввести вкладку клавіші

Question 14

Якщо ви можете, я б подумав зробити наступне: дія за замовчуванням натискання, <Enter>перебуваючи у формі, надсилає форму, і все, що ви робите для зміни цієї дії за замовчуванням / очікуваної поведінки, може спричинити деякі проблеми з юзабіліті сайту.

Question 15

Vanilla js з підтримкою Shift + Enter і можливістю вибору, які теги HTML можна фокусувати. Має працювати IE9 +.

  onKeyUp(e) {
    switch (e.keyCode) {
      case 13: //Enter
        var focusableElements = document.querySelectorAll('input, button')
        var index = Array.prototype.indexOf.call(focusableElements, document.activeElement)
        if(e.shiftKey)
          focus(focusableElements, index - 1)
        else
          focus(focusableElements, index + 1)

        e.preventDefault()
        break;
    }
    function focus(elements, index) {
      if(elements[index])
        elements[index].focus()
    }
  }

Question 16

Спробуйте це...

$(document).ready(function () {
    $.fn.enterkeytab = function () {
        $(this).on('keydown', 'input,select,text,button', function (e) {
            var self = $(this)
              , form = self.parents('form:eq(0)')
              , focusable
              , next
            ;
            if (e.keyCode == 13) {
                focusable = form.find('input,a,select').filter(':visible');
                next = focusable.eq(focusable.index(this) + 1);
                if (next.length) {
                    //if disable try get next 10 fields
                    if (next.is(":disabled")){
                        for(i=2;i<10;i++){
                            next = focusable.eq(focusable.index(this) + i);
                            if (!next.is(":disabled"))
                                break;
                        }
                    }
                    next.focus();
                }
                return false;
            }
        });
    }
    $("form").enterkeytab();
});

Question 17

Ось що я придумав.

form.addEventListener("submit", (e) => { //On Submit
 let key = e.charCode || e.keyCode || 0 //get the key code
 if (key = 13) { //If enter key
    e.preventDefault()
    const inputs = Array.from(document.querySelectorAll("form input")) //Get array of inputs
    let nextInput = inputs[inputs.indexOf(document.activeElement) + 1] //get index of input after the current input
    nextInput.focus() //focus new input
}
}

Question 18

Багато відповідей тут використовує e.keyCodeі e.whichзастарілі.

Натомість вам слід використовувати e.key === 'Enter'.

Документація: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode

Вибачте, але зараз я не можу протестувати ці фрагменти. Повернеться пізніше після тестування.

За допомогою HTML:

<body onkeypress="if(event.key==='Enter' && event.target.form){focusNextElement(event); return false;}">

За допомогою jQuery:

$(window).on('keypress', function (ev)
{
    if (ev.key === "Enter" && ev.currentTarget.form) focusNextElement(ev)
}

І з Vanilla JS:

document.addEventListener('keypress', function (ev) {
    if (ev.key === "Enter" && ev.currentTarget.form) focusNextElement(ev);
});

Ви можете взяти focusNextElement()функцію тут: https://stackoverflow.com/a/35173443/3356679

Question 19

Найпростіший спосіб вирішити цю проблему за допомогою функції фокусування JavaScript наступним чином:

Ви можете скопіювати та спробувати @ home!

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>

    <input id="input1" type="text" onkeypress="pressEnter()" />
    <input id="input2" type="text" onkeypress="pressEnter2()" />
    <input id="input3" type="text"/>

    <script type="text/javascript">
    function pressEnter() {
      // Key Code for ENTER = 13
      if ((event.keyCode == 13)) {
        document.getElementById("input2").focus({preventScroll:false});
      }
    }
    function pressEnter2() {
      if ((event.keyCode == 13)) {
        document.getElementById("input3").focus({preventScroll:false});
      }
    }
    </script>

  </body>
</html>

Question 20

function return2tab (div)
{
    document.addEventListener('keydown', function (ev) {
        if (ev.key === "Enter" && ev.target.nodeName === 'INPUT') {

            var focusableElementsString = 'a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [tabindex="0"], [contenteditable]';

            let ol= div.querySelectorAll(focusableElementsString);

            for (let i=0; i<ol.length; i++) {
                if (ol[i] === ev.target) {
                    let o= i<ol.length-1? ol[i+1]: o[0];
                    o.focus(); break;
                }
            }
            ev.preventDefault();
        }
    });
}

Question 21

Я мав одночасну потребу. Ось що я зробив:

  <script type="text/javascript" language="javascript">
    function convertEnterToTab() {
      if(event.keyCode==13) {
        event.keyCode = 9;
      }
    }
    document.onkeydown = convertEnterToTab;    
  </script>

Question 22

У всіх цих випадках працює лише в Chrome та IE, я додав такий код, щоб вирішити це:

ключ ключа = (window.event)? e.keyCode: е. який;

і я перевірив значення ключа, якщо код ключа дорівнює 13

    $('body').on('keydown', 'input, select, textarea', function (e) {
    var self = $(this)
      , form = self.parents('form:eq(0)')
      , focusable
      , next
    ;

    var key = (window.event) ? e.keyCode : e.which;

    if (key == 13) {
        focusable = form.find('input,a,select,button,textarea').filter(':visible');
        next = focusable.eq(focusable.index(this) + 1);
        if (next.length) {
            next.focus();
        } else {
            focusable.click();
        }
        return false;
    }
});

Question 23

$("#form input , select , textarea").keypress(function(e){
    if(e.keyCode == 13){
        var enter_position = $(this).index();
        $("#form input , select , textarea").eq(enter_position+1).focus();
    }
});

Question 24

Ви можете програмувати ітерацію елементів форми, додаючи обробник onkeydown по ходу. Таким чином ви можете повторно використовувати код.