Нажатие клавиши ввода ведет себя как вкладка в Javascript - PullRequest
64 голосов
/ 18 июня 2009

Я ищу создание формы, в которой нажатие клавиши ввода заставляет фокус перейти к «следующему» элементу формы на странице. Решение, которое я продолжаю находить в Интернете, это ...

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

К сожалению, это работает только в IE. Так что настоящий вопрос в этом вопросе, если кто-нибудь знает решение, которое работает для FF и Chrome? Кроме того, я бы предпочел не добавлять события onkeydown к самим элементам формы, но если это единственный способ, он должен это сделать.

Эта проблема похожа на вопрос 905222 , но, на мой взгляд, заслуживает отдельного вопроса.

Редактировать: также я видел, как люди поднимают вопрос о том, что это не очень хороший стиль, поскольку он отличается от поведения форм, к которому привыкли пользователи. Согласен! Это запрос клиента: (

Ответы [ 21 ]

0 голосов
/ 06 мая 2019

Многие ответы здесь используют 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

0 голосов
/ 26 апреля 2017

Попробуйте это ...

$(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();
});
0 голосов
/ 16 февраля 2017

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()
    }
  }
0 голосов
/ 09 декабря 2009

У меня была симульная потребность. Вот что я сделал:

  <script type="text/javascript" language="javascript">
    function convertEnterToTab() {
      if(event.keyCode==13) {
        event.keyCode = 9;
      }
    }
    document.onkeydown = convertEnterToTab;    
  </script>  
0 голосов
/ 09 сентября 2016

Во всех этих случаях, работает только в Chrome и IE, я добавил следующий код, чтобы решить это:

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

и я проверил значение ключа, если код ключа равен 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;
    }
});
0 голосов
/ 17 марта 2013

У меня это работает только в JavaScript. Firefox не позволит вам обновить keyCode, поэтому все, что вы можете сделать, это перехватить keyCode 13 и заставить его сосредоточиться на следующем элементе с помощью tabIndex, как если бы был нажат keyCode 9. Самое сложное - найти следующий вкладочный индекс. Я проверил это только на 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, и это поведение также будет работать с клавишей табуляции.

0 голосов
/ 31 июля 2013

Вы можете использовать мой код ниже, протестированный в 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 (). // ввод ключевой вкладки

0 голосов
/ 18 июня 2009

Если вы можете, я бы пересмотрел это: действие по умолчанию, нажав <Enter>, когда форма отправляет форму, и все, что вы делаете для изменения этого действия по умолчанию / ожидаемого поведения, может вызвать некоторые проблемы с юзабилити сайта.

0 голосов
/ 11 мая 2019

Вот что я придумал.

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
}
}
0 голосов
/ 27 июня 2019
$("#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();
    }
});
...