Jquery, как поймать ключ ввода и изменить событие на вкладку
Я хочу jquery-решение, я должен быть близок, что нужно сделать?
$('html').bind('keypress', function(e)
{
if(e.keyCode == 13)
{
return e.keyCode = 9; //set event key to tab
}
});
Я могу вернуть false, и он не позволяет нажатию клавиши ввода, я думал, что могу просто изменить keyCode на 9, чтобы сделать его вкладкой, но он не работает. Я должен быть рядом, что происходит?
Ответы
Ответ 1
Вот решение:
$('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;
}
});
Ответ 2
Это работает отлично!
$('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();
}
});
Ответ 3
Почему не так просто?
$(document).on('keypress', 'input', function(e) {
if(e.keyCode == 13 && e.target.type !== 'submit') {
e.preventDefault();
return $(e.target).blur().focus();
}
});
Таким образом, вы не запускаете отправку, если только вы не сосредоточены на типе ввода "отправить", и он ставит вас прямо там, где вы остановились. Это также позволяет работать с входами, которые динамически добавляются на страницу.
Примечание. Blur() находится перед фокусом() для всех, кто может иметь прослушиватели событий "на размытие". Это не обязательно, чтобы процесс работал.
Ответ 4
PlusAsTab: плагин jQuery для использования клавиши numpad plus в качестве эквивалента табуляции.
PlusAsTab также настраивается для использования ключа ввода, как в этой демонстрации. Смотрите некоторые из моих более старых ответов на этот вопрос.
В вашем случае, заменив клавишу ввода на вкладку для всей страницы (после установки клавиши ввода в качестве вкладки в параметрах).
<body data-plus-as-tab="true">
...
</body>
Ответ 5
Построение из плагина Ben в этой версии обрабатывает select, и вы можете передать опцию allowSubmit. то есть. $("#form").enterAsTab({ 'allowSubmit': true}); Это позволит ввести, чтобы отправить форму, если кнопка отправки обрабатывает событие.
(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 );
Ответ 6
Это, наконец, то, что отлично работает для меня. Я использую 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();
}
}
});
Ответ 7
Я написал код из принятого ответа как плагин jQuery, который я считаю более полезным. (также он теперь игнорирует скрытые, отключенные и readonly элементы формы).
$.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();... Понял, что я бы опубликовал, так как никто еще не разместил его как плагин $, и они не совсем интуитивно понятны для записи.
Ответ 8
Это мое решение, обратная связь приветствуется.:)
$('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
});
Ответ 9
Я взял лучшее из вышеизложенного и добавил возможность работать с любым входом, вне форм и т.д. Также он правильно возвращается назад, чтобы начать, если вы достигнете последнего ввода. И в случае только одного входа он размывает, затем переориентирует один вход для запуска любых внешних обработчиков размытия/фокусировки.
$('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();
}
}
});
Ответ 10
Вот что я использовал:
$("[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
Ответ 11
Включает все типы входов
$(':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();
}
});
Ответ 12
Эти решения не работали с моим datagrid. Я надеялся, что они это сделают. Мне действительно не нужно Tab или Enter, чтобы перейти к следующему входу, столбцу, строке или любому другому. Мне просто нужно Enter для запуска .focusout или .change, а мой datagrid обновляет базу данных. Поэтому я добавил класс "enter" к соответствующим текстовым вводам, и это сделало трюк для меня:
$(function() {
if ($.browser.mozilla) {
$(".enter").keypress(checkForEnter);
} else {
$(".enter").keydown(checkForEnter);
}
});
function checkForEnter(event) {
if (event.keyCode == 13) {
$(".enter").blur();
}
}
Ответ 13
$('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;
}
});
видимый вход не может быть сфокусирован.
Ответ 14
Я знаю, что этот вопрос старше Бога, но я никогда не видел ответа, который был таким изящным.
doc.on('keydown', 'input', function(e, ui) {
if(e.keyCode === 13){
e.preventDefault();
$(this).nextAll('input:visible').eq(0).focus();
}
});
который, кажется, выполняет работу в нескольких строках, насколько это возможно по-человечески.
Ответ 15
вы должны отфильтровать все отключенные и только элементы readonly.
я думаю, что этот код не должен охватывать кнопки
$('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;
}
});
Ответ 16
У меня было такое же требование в моем развитии, поэтому я исследовал это. Я прочитал много статей и пробовал много решений в течение последних двух дней, таких как 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;
Я тоже оставил прокомментированные строки, поэтому мое мышление может быть выполнено.
Ответ 17
Если вы используете 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>
