Javascript 如何将 Enter 键转换为网页的 Tab 键
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8664375/
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 Convert An Enter Key Press Into A Tab Key Press For Web Pages
提问by deep
The enter key press should work like a Tab key press.The enter key press for TextArea and Submit Button should work as usual.Focus should skip from the next element when the next field is disabled/readonly.
回车键应该像 Tab 键一样工作。TextArea 和提交按钮的回车键应该像往常一样工作。当下一个字段被禁用/只读时，焦点应该从下一个元素跳过。
thanks,
谢谢，
回答by Andrew Whitaker
First off, this is probably not a great idea usability-wise. However, here's something that should work:
首先，这在可用性方面可能不是一个好主意。但是，这里有一些应该起作用的东西：
$(":input").on("keydown", function(event) {
if (event.which === 13 && !$(this).is("textarea, :button, :submit")) {
event.stopPropagation();
event.preventDefault();
$(this)
.nextAll(":input:not(:disabled, [readonly='readonly'])")
.first()
.focus();
}
});
Example:http://jsfiddle.net/NDcrk/
示例：http : //jsfiddle.net/NDcrk/
The piece that finds the next input may have to change, depending on your markup.
找到下一个输入的部分可能必须更改，具体取决于您的标记。
回答by Ajit Poudel
This solution work for me. Tested it on IE and FireFox.
这个解决方案对我有用。在 IE 和 FireFox 上对其进行了测试。
<script type="text/javascript">
function tabE(obj, e) {
var e = (typeof event != 'undefined') ? window.event : e; // IE : Moz
if (e.keyCode == 13) {
var ele = document.forms[0].elements;
for (var i = 0; i < ele.length; i++) {
var q = (i == ele.length - 1) ? 0 : i + 1; // if last element : if any other
if (obj == ele[i]) {
ele[q].focus();
break
}
}
return false;
}
}
</script>
<form METHOD="POST">
<input name="" type="text" onkeypress="return tabE(this,event)">
<br>
<input name="" type="text" onkeypress="return tabE(this,event)">
<br>
<input name="" type="text" onkeypress="return tabE(this,event)">
<br>
<INPUT TYPE="submit" Value="Ok">
</form>
I found it here.
回答by Puuje BP
How to check form element is displayed in this case? I have a many input(text box, radio button,) but some elements are displayed, some elements not displayed
在这种情况下如何检查表单元素是否显示？我有很多输入（文本框、单选按钮），但显示了一些元素，未显示一些元素
<script type="text/javascript">
function tabE(obj, e) {
var e = (typeof event != 'undefined') ? window.event : e; // IE : Moz
if (e.keyCode == 13) {
var ele = document.forms[0].elements;
for (var i = 0; i < ele.length; i++) {
var q = (i == ele.length - 1) ? 0 : i + 1; // if last element : if any other
if (obj == ele[i]) {
ele[q].focus();
break
}
}
return false;
}
}
</script>
<form METHOD="POST">
<input name="" type="text" onkeypress="return tabE(this,event)">
<br>
<input name="" type="text" onkeypress="return tabE(this,event)">
<br>
<input name="" type="text" onkeypress="return tabE(this,event)">
<br>
<INPUT TYPE="submit" Value="Ok">
</form>
回答by oezkanbu
The easiest way to solve this problem with the focus function of JavaScript is as follows:
用JavaScript的focus函数解决这个问题最简单的方法如下：
You can copy it and try it @ home!
你可以复制它并尝试@home！
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input id="input1" type="text" onkeypress="pressEnter()" />
<input id="input2" type="text" onkeypress="pressEnter2()" />
<input id="input3" type="text"/>
<script type="text/javascript">
function pressEnter() {
// Key Code for ENTER = 13
if ((event.keyCode == 13)) {
document.getElementById("input2").focus({preventScroll:false});
}
}
function pressEnter2() {
if ((event.keyCode == 13)) {
document.getElementById("input3").focus({preventScroll:false});
}
}
</script>
</body>
</html>
回答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
});
Sample HTML
示例 HTML
<!-- Enable enter as tab as the default for all fields in this form -->
<form data-plus-as-tab="true">
<input type="text" value="Enter skips to the next field" autofocus="autofocus" />
<!-- Exclude this textarea -->
<textarea data-plus-as-tab="false">Enter works as usual</textarea>
<input type="text" value="Enter skips to the next field" />
<select><option>Enter skips here too</option></select>
<!-- Exclude this submit button -->
<button type="submit" data-plus-as-tab="false">Enter works as usual</button>
</form>
As you can see, it's easy to enable all elements in a container with data-plus-as-tab="true", and it's easy to exclude specific elements with data-plus-as-tab="false". You can also exclude certain types (on existing elements) from javascript with $('textarea, :button').plusAsTab(false);.
如您所见，使用 可以轻松启用容器中的所有元素，使用data-plus-as-tab="true"可以轻松排除特定元素data-plus-as-tab="false"。您还可以使用 .js 从 javascript 中排除某些类型（在现有元素上）$('textarea, :button').plusAsTab(false);。
You can try it out yourself in the PlusAsTab enter as tab demo.
您可以在PlusAsTab 中自己尝试输入作为选项卡演示。
