jquery как поймать клавишу ввода и изменить событие на вкладку

Я хочу решение jquery, я должен быть рядом, что нужно сделать?



$('html').bind('keypress', function(e)

{

     if(e.keyCode == 13)

     {

         return e.keyCode = 9; //set event key to tab

     }

});


Я могу вернуть false, и это предотвращает нажатие клавиши enter, я думал, что могу просто изменить код ключа на 9, чтобы сделать его вкладкой, но он не работает. Я должен быть рядом, что происходит?

590   18  

18 ответов:

вот решение :

$('input').on("keypress", function(e) {
            /* ENTER PRESSED*/
            if (e.keyCode == 13) {
                /* FOCUS ELEMENT */
                var inputs = $(this).parents("form").eq(0).find(":input");
                var idx = inputs.index(this);

                if (idx == inputs.length - 1) {
                    inputs[0].select()
                } else {
                    inputs[idx + 1].focus(); //  handles submit buttons
                    inputs[idx + 1].select();
                }
                return false;
            }
        });
62  
2014-10-10 03:10:06

это работает прекрасно!

 $('input').keydown( function(e) {
        var key = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0;
        if(key == 13) {
            e.preventDefault();
            var inputs = $(this).closest('form').find(':input:visible');
            inputs.eq( inputs.index(this)+ 1 ).focus();
        }
    });
30  
2011-05-25 20:48:12

почему бы не что-то простое, как это?

$(document).on('keypress', 'input', function(e) {

  if(e.keyCode == 13 && e.target.type !== 'submit') {
    e.preventDefault();
    return $(e.target).blur().focus();
  }

});

таким образом, вы не запускаете submit, если вы не сосредоточены на типе ввода "submit" уже, и это ставит вас прямо там, где вы остановились. Это также заставляет его работать для входов, которые динамически добавляются на страницу.

Примечание: размытие () находится перед фокусом () для всех, кто может иметь какие-либо слушатели событий "on blur". Это не обязательно для того, чтобы процесс работал.

8  
2013-05-28 00:24:08

PlusAsTab: плагин jQuery для использования клавиши numpad plus в качестве эквивалента клавиши tab.

PlusAsTab также настраивается для использования клавиши enter, как в этом демо. Смотрите некоторые из моихстарые ответына этот вопрос.

в вашем случае, заменив клавишу enter на функцию tab для всей страницы (после установки клавиши enter в качестве вкладки в настройках).

<body data-plus-as-tab="true">
    ...
</body>
7  
2017-04-30 10:30:51

построение из плагина Бена эта версия обрабатывает выбор, и вы можете передать опцию allowSubmit. то есть. $("#form").enterAsTab({ 'allowSubmit': true}); Это позволит enter отправить форму, если кнопка Отправить обрабатывает событие.

(function( $ ){
    $.fn.enterAsTab = function( options ) {  
    var settings = $.extend( {
       'allowSubmit': false
    }, options);
    this.find('input, select').live("keypress", {localSettings: settings}, function(event) {
        if (settings.allowSubmit) {
        var type = $(this).attr("type");
        if (type == "submit") {
            return true;
        } 
    }
    if (event.keyCode == 13 ) {
        var inputs =   $(this).parents("form").eq(0).find(":input:visible:not(disabled):not([readonly])");
        var idx = inputs.index(this);
        if (idx == inputs.length - 1) {
           idx = -1;
       } else {
           inputs[idx + 1].focus(); // handles submit buttons
      }
        try {
            inputs[idx + 1].select();
            }
        catch(err) {
            // handle objects not offering select
            }
        return false;
    }
});
  return this;
};
})( jQuery );
5  
2014-05-27 14:53:21

это наконец-то, что работает для меня идеально. Я использую jqeasyui и он работает нормально

$(document).on('keyup', 'input', function(e) {
 if(e.keyCode == 13 && e.target.type        !== 'submit') {
   var inputs =   $(e.target).parents("form").eq(0).find(":input:visible"),
   idx = inputs.index(e.target);
       if (idx == inputs.length - 1) {
          inputs[0].select()
       } else {
          inputs[idx + 1].focus();
          inputs[idx + 1].select();
       }
 }

});
4  
2013-11-03 09:55:44

Я написал код из принятого ответа как плагин jQuery, который я нахожу более полезным. (кроме того, теперь он игнорирует скрытые, отключенные и только для чтения элементы формы). 

$.fn.enterAsTab = function () {
  $(this).find('input').live("keypress", function(e) {
    /* ENTER PRESSED*/
    if (e.keyCode == 13) {
        /* FOCUS ELEMENT */
        var inputs =   $(this).parents("form").eq(0).find(":input:visible:not(disabled):not([readonly])"),
            idx = inputs.index(this);

        if (idx == inputs.length - 1) {
            inputs[0].select()
        } else {
            inputs[idx + 1].focus(); // handles submit buttons
            inputs[idx + 1].select();
        }
        return false;
    }
  });
  return this;
};

таким образом, я могу сделать $('#form-id').enterAsTab (); ... Решил, что я опубликую, так как никто еще не опубликовал его как плагин$, и они не совсем интуитивно понятны для написания.

3  
2012-04-05 06:25:25

включает в себя все типы входов

$(':input').keydown(function (e) {
    var key = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0;
    if (key == 13) {
        e.preventDefault();
        var inputs = $(this).closest('form').find(':input:visible:enabled');
        if ((inputs.length-1) == inputs.index(this))
            $(':input:enabled:visible:first').focus();
        else
            inputs.eq(inputs.index(this) + 1).focus();
    }
});
3  
2014-07-11 21:20:49

Это мое решение, обратная связь приветствуется.. :)

$('input').keydown( function (event) { //event==Keyevent
    if(event.which == 13) {
        var inputs = $(this).closest('form').find(':input:visible');
        inputs.eq( inputs.index(this)+ 1 ).focus();
        event.preventDefault(); //Disable standard Enterkey action
    }
    // event.preventDefault(); <- Disable all keys  action
});
2  
2011-10-03 09:28:47

вот что я использую:

$("[tabindex]").addClass("TabOnEnter");
$(document).on("keypress", ".TabOnEnter", function (e) {
 //Only do something when the user presses enter
     if (e.keyCode == 13) {
          var nextElement = $('[tabindex="' + (this.tabIndex + 1) + '"]');
          console.log(this, nextElement);
           if (nextElement.length)
                nextElement.focus()
           else
                $('[tabindex="1"]').focus();
      }
});

обращает внимание на tabindex и относится не только к форме, но на всю страницу.

Примечаниеlive был устаревшим jQuery, теперь вы должны использовать on

2  
2014-05-27 14:48:34

Я взял лучшее из вышеперечисленных и добавлена возможность работы с любого входа, за пределами форм и т. д. Кроме того, он правильно петли назад, чтобы начать сейчас, если вы достигнете последнего входа. И в случае только одного входа он размывается, а затем перефокусирует один вход, чтобы вызвать любые внешние обработчики размытия/фокусировки.

$('input,select').keydown( function(e) {
  var key = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0;
  if(key == 13) {
    e.preventDefault();
    var inputs = $('#content').find(':input:visible');
    var nextinput = 0;
    if (inputs.index(this) < (inputs.length-1)) {
      nextinput = inputs.index(this)+1;
    }
    if (inputs.length==1) {
      $(this).blur().focus();
    } else {
      inputs.eq(nextinput).focus();
    }
  }
});
2  
2017-08-10 00:22:45

эти решения не работали с моим datagrid. Я надеялся, что так и будет. Мне действительно не нужно Tab или Enter, чтобы перейти к следующему входу, столбцу, строке или чему-то еще. Мне просто нужно Войти, чтобы вызвать .focusout или .измените и мой datagrid обновит базу данных. Поэтому я добавил класс "enter" к соответствующим текстовым вводам, и это сделало трюк для меня:

$(function() {
   if ($.browser.mozilla) {
        $(".enter").keypress(checkForEnter);
    } else {
        $(".enter").keydown(checkForEnter);
    }
});

function checkForEnter(event) {
    if (event.keyCode == 13) {
        $(".enter").blur();
    }
}
1  
2012-03-17 01:31:53 
$('input').live("keypress", function(e) {
            /* ENTER PRESSED*/
            if (e.keyCode == 13) {
                /* FOCUS ELEMENT */
                var inputs = $(this).parents("form").eq(0).find(":input:visible");
                var idx = inputs.index(this);

                if (idx == inputs.length - 1) {
                    inputs[0].select()
                } else {
                    inputs[idx + 1].focus(); //  handles submit buttons
                    inputs[idx + 1].select();
                }
                return false;
            }
        });

видимый вход не может быть сфокусирован.

0  
2010-03-16 05:09:08 
doc.on('keydown', 'input', function(e, ui) {
    if(e.keyCode === 13){
        e.preventDefault();
        $(this).nextAll('input:visible').eq(0).focus();
    }
});

это, кажется, получить работу в нескольких строках, как по-человечески возможно.

0  
2013-08-11 06:05:18

вы должны фильтровать все отключенные и только для чтения элементы. я думаю, что этот код не должен покрывать кнопки

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

    if (e.keyCode == 13 && !submit) {
        focusable = form.find('input,a,select,button,textarea').filter(':visible:not([readonly]):not([disabled])');
        next = focusable.eq(focusable.index(this)+1);

        if (next.length) {
            next.focus();
        } else {
            form.submit();
        }

        return false;
    }
});
0  
2016-12-23 11:39:14

У меня было такое же требование в моей разработке, поэтому я провел исследование по этому вопросу. Я прочитал много статей и попробовал много решений в течение последних двух дней, таких как jQuery.плагин tabNext ().

У меня были некоторые проблемы с IE11 (все версии IE имеет эту ошибку). При вводе текста с последующим нетекстовым вводом выделение не было очищено. Поэтому я создал свой собственный метод tabNext (), основанный на предложении решения @Sarfraz. Я также думал о том, как он должен себя вести (только круг в текущей форме или может быть, через полный документ). Я все еще не заботился о свойстве tabindex в основном потому, что я использую его время от времени. Но я этого не забуду.

для того, чтобы мой вклад может быть полезен для всех легко я создал jsfiddle пример здесь https://jsfiddle.net/mkrivan/hohx4nes/

Я включаю также JavaScript часть примера здесь:

            function clearSelection() {
            if (document.getSelection) { // for all new browsers (IE9+, Chrome, Firefox)
                document.getSelection().removeAllRanges();
                document.getSelection().addRange(document.createRange());
                console.log("document.getSelection");
            } else if (window.getSelection) { // equals with the document.getSelection (MSDN info)
                if (window.getSelection().removeAllRanges) {  // for all new browsers (IE9+, Chrome, Firefox)
                    window.getSelection().removeAllRanges();
                    window.getSelection().addRange(document.createRange());
                    console.log("window.getSelection.removeAllRanges");
                } else if (window.getSelection().empty) {  // maybe for old Chrome
                    window.getSelection().empty();
                    console.log("window.getSelection.empty");
                }
            } else if (document.selection) {  // IE8- deprecated
                document.selection.empty();
                console.log("document.selection.empty");
            }
        }
        function focusNextInputElement(node) { // instead of jQuery.tabNext();
            // TODO: take the tabindex into account if defined
            if (node !== null) {
                // stay in the current form
                var inputs = $(node).parents("form").eq(0).find(":input:visible:not([disabled]):not([readonly])");
                // if you want through the full document (as TAB key is working)
                // var inputs = $(document).find(":input:visible:not([disabled]):not([readonly])");
                var idx = inputs.index(node) + 1; // next input element index
                if (idx === inputs.length) { // at the end start with the first one
                    idx = 0;
                }
                var nextInputElement = inputs[idx];
                nextInputElement.focus(); //  handles submit buttons
                try { // if next input element does not support select()
                    nextInputElement.select();
                } catch (e) {
                }
            }
        }
        function tabNext() {
            var currentActiveNode = document.activeElement;
            clearSelection();
            focusNextInputElement(currentActiveNode);
        }
        function stopReturnKey(e) {
            var e = (e) ? e : ((event) ? event : null);
            if (e !== null) {
                var node = (e.target) ? e.target : ((e.srcElement) ? e.srcElement : null);
                if (node !== null) {
                    var requiredNode = $(node).is(':input')
                            // && !$(node).is(':input[button]')
                            // && !$(node).is(':input[type="submit"]')
                            && !$(node).is('textarea');
                    // console.log('event key code ' + e.keyCode + '; required node ' + requiredNode);
                    if ((e.keyCode === 13) && requiredNode) {
                        try {
                            tabNext();
                            // clearSelection();
                            // focusNextInputElement(node);
                            // jQuery.tabNext();
                            console.log("success");
                        } catch (e) {
                            console.log("error");
                        }
                        return false;
                    }
                }
            }
        }
        document.onkeydown = stopReturnKey;

Я оставил комментированные строки, так что мое мышление можно проследить.

0  
2017-05-21 12:09:02

Я знаю, что это довольно старый, но я искал тот же ответ и обнаружил, что выбранное решение не подчиняется tabIndex. Поэтому я изменил его следующим образом, который работает для меня. Обратите внимание, что maxTabNumber-это глобальная переменная, которая содержит максимальное количество полей ввода табуляции

  $('input').on("keypress", function (e) {
                if (e.keyCode == 13) {
                    var inputs = $(this).parents("form").eq(0).find(":input");
                    var idx = inputs.index(this);

                    var tabIndex = parseInt($(this).attr("tabindex"));
                    tabIndex = (tabIndex + 1) % (maxTabNumber + 1);
                    if (tabIndex == 0) { tabIndex = 1; }
                    $('[tabindex=' + tabIndex + ']').focus();
                    $('[tabindex=' + tabIndex + ']').select();
          
                    return false;
                }
    });
0  
2018-04-04 14:13:29

Если вы используете IE, это отлично сработало для меня:

    <body onkeydown="tabOnEnter()">
    <script type="text/javascript">
    //prevents the enter key from submitting the form, instead it tabs to the next field
    function tabOnEnter() {
        if (event.keyCode==13) 
        {
            event.keyCode=9; return event.keyCode 
        }
    }
    </script>
-1  
2016-05-05 01:05:11

Comments

    Ничего не найдено.
Click here to cancel reply.