Как смоделировать TAB на нажатие клавиши ENTER в JavaScript или JQuery
Я хочу изменить код клавиши при нажатии клавиш (нажатие клавиши) на всех входах на странице. Я хочу заменить Ввод кода клавиши на код клавиши TAB. Как я могу это сделать?
Спасибо
РЕДАКТИРОВАТЬ 1)
Рассмотрим этот код:
<div>
<asp:RadioButtonList ID="RadioButtonList1" runat="server">
<asp:ListItem>1</asp:ListItem>
<asp:ListItem>2</asp:ListItem>
<asp:ListItem>3</asp:ListItem>
<asp:ListItem>4</asp:ListItem>
</asp:RadioButtonList>
<br />
<br />
<asp:TextBox ID="TextBox1" runat="server">3333</asp:TextBox>
<br />
<br />
<asp:DropDownList ID="DropDownList1" runat="server">
<asp:ListItem>1</asp:ListItem>
<asp:ListItem>2</asp:ListItem>
<asp:ListItem>3</asp:ListItem>
</asp:DropDownList>
</div>
Я хочу, чтобы когда пользователь нажимал Enter на каждом из указанных выше элементов управления, переходите к следующему элементу управления.
Спасибо
8 ответов
Я думаю, что эта работа:
$('input').live("keypress", function (e) {
/* ENTER PRESSED*/
var OffSet = 0;
if (e.keyCode == 13) {
/* FOCUS ELEMENT */
if ($(this).is("input[type='radio']")) {
var tblID = $(this).closest('table').attr('id');
var radios = $('#' + tblID).find(":input");
//alert(radios.index(this));
OffSet = radios.length - radios.index(this) - 1;
}
//alert(OffSet);
var inputs = $(this).parents("form").eq(0).find(":input");
var idx = inputs.index(this);
inputs[idx + OffSet].blur();
try {
inputs[idx + OffSet].selectionStart = inputs[idx + OffSet].selectionEnd = -1;
} catch (e) {
}
if (idx == inputs.length - 1) {
inputs[0].select();
} else {
inputs[idx + 1 + OffSet].focus(); // handles submit buttons
try {
inputs[idx + 1 + OffSet].select();
} catch (e) {
}
}
return false;
}
});
У меня была похожая проблема, когда я хотел нажать + на цифровой клавиатуре, чтобы перейти к следующему полю. Теперь я выпустил библиотеку, которая, я думаю, поможет вам.
PlusAsTab: плагин jQuery для использования клавиши numpad plus в качестве эквивалента клавиши табуляции.
Поскольку вместо этого вы хотите ввести / ↵, вы можете установить параметры. Узнайте, какой ключ вы хотите использовать с демонстрацией jQuery.
JoelPurra.PlusAsTab.setOptions({
// Use enter instead of plus
// Number 13 found through demo at
// https://api.jquery.com/event.which/
key: 13
});
Затем включите функцию, добавив plus-as-tab="true"
к полям формы, в которой вы хотите использовать команду enter-as-tab, или какой-либо другой элемент, содержащий эти поля формы. Переключатели не должны быть проблемой, так как они покрыты другой моей библиотекой, EmulateTab - см. Автонавигацию переключателей в этой демонстрации.
<div plus-as-tab="true">
<!-- all focusable elements inside the <div> will be enabled -->
<asp:RadioButtonList ID="RadioButtonList1" runat="server">
<!-- Radio buttons should not be a problem. -->
</asp:RadioButtonList>
</div>
Вы можете попробовать это сами в PlusAsTab, войдите в качестве демонстрационной вкладки.
Этот код должен заменить ввод знаком табуляции:
$("#wmd-input").bind("keypress", function(e) {
if (e.keyCode == 13) {
var input = $(this);
var inputVal = input.val();
setTimeout(function() {
input.val(inputVal.substring(0,inputVal.length) + "\t");
}, 1);
}
});
ОБНОВИТЬ:
Этот код должен сосредоточиться на следующем элементе:
$(document).ready(function () {
$("input,select").bind("keydown", function (e) {
if (e.keyCode == 13) {
var allInputs = $("input,select");
for (var i = 0; i < allInputs.length; i++) {
if (allInputs[i] == this) {
while ((allInputs[i]).name == (allInputs[i + 1]).name) {
i++;
}
if ((i + 1) < allInputs.length) $(allInputs[i + 1]).focus();
}
}
}
});
});
$('input').on('keydown',function(e){
var keyCode = e.keyCode || e.which;
if(e.keyCode === 13) {
e.preventDefault();
$('input')[$('input').index(this)+1].focus();
}
});
проверьте скрипку здесь: http://jsfiddle.net/Pd5QC/
Надеюсь, это работает
$('input,textarea').keydown(function(){
if(event.keyCode==13) {
event.keyCode = 9;
}
});
редактировать
Попробуйте это http://jsfiddle.net/GUmUg/. Поиграйте с селекторами, чтобы сделать эту работу, так как я не знаю, asp
$('input,textarea').keypress(function(e){
if(e.keyCode==13) {
$(this).next().focus();
}
});
Я делаю это, используя jquery для каждого по вашему выбору и фокусируясь на элементе после того, как текущий на вас включен.
$(document).on('keyup', '.my-input', function (ev) {
if (ev.keyCode == '13') {
var currentInput = this;
var isOnCurrent = false;
$('.my-input').each(function () {
if (isOnCurrent == true) {
$(this).focus();
return false;
}
if (this == currentInput) {
isOnCurrent = true;
}
});
}
});
Я создал простой плагин jQuery, который решает эту проблему. Он использует селектор ":tabbable" пользовательского интерфейса jQuery, чтобы найти следующий элемент "tabbable" и выбрать его.
Пример использования:
// Simulate tab key when enter is pressed
$('.myElement').bind('keypress', function(event){
if(event.which === 13){
if(event.shiftKey){
$.tabPrev();
}
else{
$.tabNext();
}
return false;
}
});
$(document).ready(function() {
//Objetos con CssClass="EntTab" sustituye el Enter (keycode 13) por un Tabulador (keycode 9)!!
$(".EntTab").bind("keypress", function(e) {
if (e.keyCode == 13) {
var inps = $("input, select"); //add select too
for (var x = 0; x < inps.length; x++) {
if (inps[x] == this) {
while ((inps[x]).name == (inps[x + 1]).name) {
x++;
}
if ((x + 1) < inps.length) $(inps[x + 1]).focus();
}
} e.preventDefault();
}
});
});