如何在 javascript 或 jQuery 中模拟 ENTER 按键上的 TAB
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8546252/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to simulate TAB on ENTER keypress in javascript or jQuery
提问by Arian
I want to change keycode in keydown ( key press ) in all input in a page.I want to replace Enter keycode with TAB key code. How I can do this?
我想在页面中的所有输入中更改 keydown（按键）中的键码。我想用 TAB 键码替换 Enter 键码。我怎么能做到这一点？
thanks
谢谢
EDIT 1)
编辑 1)
Consider this code:
考虑这个代码：
<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>
I want when user press Enter on eny of above control focus go to next control.
我希望当用户在上述控件中的任何一个上按下 Enter 键时，转到下一个控件。
thanks
谢谢
采纳答案by Arian
I think this work:
我认为这项工作：
$('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;
}
});
回答by Joel Purra
I've had a similar problem, where I wanted to press +on the numpad to tab to the next field. Now I've released a library that I think will help you.
我遇到了类似的问题，我想按下+小键盘以切换到下一个字段。现在我发布了一个我认为会对你有所帮助的库。
PlusAsTab: A jQuery plugin to use the numpad plus key as a tab key equivalent.
PlusAsTab: 一个 jQuery 插件，用于使用数字键盘加键作为 tab 键等价物。
Since you want enter/↵instead, you can set the options. Find out which key you want to use with the jQuery event.which demo.
既然你想要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
});
Then enable the feature by adding plus-as-tab="true"to the form fields you want to use enter-as-tab in, or some other element that contains these form fields. Radio buttons should not be a problem, as they are covered by my other library, EmulateTab- see autonavigation of radio buttons in that demo.
然后通过添加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>
You can try it out yourself in the PlusAsTab enter as tab demo.
您可以在PlusAsTab 中自己尝试输入作为选项卡演示。
回答by Abdul Munim
This code is to replace enter with tab character:
这段代码是用制表符替换回车：
$("#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);
}
});
UPDATE:
更新：
This code is to focus to on the next element:
此代码将重点放在下一个元素上：
$(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();
}
}
}
});
});
回答by dku.rajkumar
$('input').on('keydown',function(e){
var keyCode = e.keyCode || e.which;
if(e.keyCode === 13) {
e.preventDefault();
$('input')[$('input').index(this)+1].focus();
}
});
check fiddle here : http://jsfiddle.net/Pd5QC/
在这里检查小提琴：http: //jsfiddle.net/Pd5QC/
回答by aWebDeveloper
Hope this works
希望这有效
$('input,textarea').keydown(function(){
if(event.keyCode==13) {
event.keyCode = 9;
}
});
Edit
编辑
Try this http://jsfiddle.net/GUmUg/. Play around with selectors to make this work as i don't know asp
试试这个http://jsfiddle.net/GUmUg/。使用选择器来完成这项工作，因为我不知道 asp
$('input,textarea').keypress(function(e){
if(e.keyCode==13) {
$(this).next().focus();
}
});
回答by Jonathan
The way I do it is by using jquery to each over your selection and focusing on the element after the current on you are on.
我这样做的方法是在您的选择上使用 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;
}
});
}
});
回答by Mark Lagendijk
I created a simple jQuery pluginwhich does solve this problem. It uses the ':tabbable' selector of jQuery UI to find the next 'tabbable' element and selects it.
我创建了一个简单的 jQuery 插件来解决这个问题。它使用 jQuery UI 的 ':tabbable' 选择器来查找下一个 'tabbable' 元素并选择它。
Example usage:
用法示例：
// Simulate tab key when enter is pressed
$('.myElement').bind('keypress', function(event){
if(event.which === 13){
if(event.shiftKey){
$.tabPrev();
}
else{
$.tabNext();
}
return false;
}
});
回答by Jorge
$(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();
}
});
});
