Javascript 如何使用javascript强制“输入键”充当“tab键”？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10537558/
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 force "enter key" to act as "tab key" using javascript?
提问by Heba Gomaah
I'm working on a site that is full of forms to be filled and I it's required that when escape button is pressed focus move to the next input control, just as pressing "tab" do. I found code to move focus when keypressed is 13 but this need to take the ID of element to focus on
我正在一个充满要填写的表格的网站上工作，我需要在按下转义按钮时将焦点移动到下一个输入控件，就像按下“tab”一样。我找到了当按键为 13 时移动焦点的代码，但这需要获取要关注的元素的 ID
<input id="Text1" type="text" onkeydown="return noNumbers(event)" />
<input id="Text2" type="text" />
<script type="text/javascript">
function noNumbers(e) {
keynum = e.which;
if (keynum == 13)
document.getElementById("Text2").focus();
}
</script>
I need a generalized function that when key pressed code is 13 "that is enter" fire the default event of pressing 9 "that is tab", of course in Javascript
我需要一个通用函数，当按键代码为 13“即输入”时，会触发按下 9“即选项卡”的默认事件，当然在 Javascript 中
回答by bygrace
This will handle multiple input fields.
这将处理多个输入字段。
Here is the jQuery version: http://jsfiddle.net/TnEB5/3/
这是 jQuery 版本：http: //jsfiddle.net/TnEB5/3/
$('input').keypress(function(e) {
if (e.which == 13) {
$(this).next('input').focus();
e.preventDefault();
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="Text1" type="text" />
<input id="Text2" type="text" />
<input id="Text3" type="text" />Here is the pure javascript version: http://jsfiddle.net/TnEB5/5/(you probably want to get the sibling differently)
这是纯 javascript 版本：http: //jsfiddle.net/TnEB5/5/（您可能希望以不同的方式获得同级）
function tab(e) {
if (e.which == 13) {
e.target.nextSibling.nextSibling.focus();
e.preventDefault();
}
}
var inputs = document.getElementsByTagName('input');
for (var x = 0; x < inputs.length; x++)
{
var input = inputs[x];
input.onkeypress = tab;
}<input id="Text1" type="text" />
<input id="Text2" type="text" />
<input id="Text3" type="text" />回答by jbabey
handle keypress instead and return false back to the browser:
改为处理按键并将 false 返回给浏览器：
<input id="Text1" type="text" />
<input id="Text2" type="text" />
<script type="text/javascript">
document.getElementById('Text1').onkeypress = function (e) {
if (e.which === 13) {
document.getElementById("Text2").focus();
return false;
}
};
</script>
回答by Will P.
You'll need to explicitly set the tabindexproperty of the input fields for a generic solution. Something like
您需要tabindex为通用解决方案显式设置输入字段的属性。就像是
<input id="Text1" type="text" tabindex="1" />
<input id="Text2" type="text" tabindex="2" />
<script type="text/javascript">
$('input').keypress(function(e){
if(e.which==13){
$("[tabindex='"+($(this).attr("tabindex")+1)+"']").focus();
e.preventDefault();
}
});
</script>
this solution uses jquery to assign the event handler for all input type elements on the page, sets focus to the element with the next highest tabindex property, and prevents the form from submitting when enter is pressed using e.preventDefault(). Here's a jfiddle
此解决方案使用 jquery 为页面上的所有输入类型元素分配事件处理程序，将焦点设置为具有下一个最高 tabindex 属性的元素，并在使用 e.preventDefault() 按下 Enter 时防止表单提交。这是一个jfiddle
回答by Joshua Espana
Althought the post is old, I hope my answer can help someone in need. I have a smilar situation:
虽然帖子很旧，但希望我的回答能帮助到有需要的人。我有一个类似的情况：
I have a very large formfor an employee scheduler application with different types of input fields. Some of the input fields are hidden sometimes and not other times. I was asked to make the enter key behave as the tab keyso the users of the form could use the 10-key when creating thier employees schedule. Here is how I solved my problem:
我有一个非常大的表单，用于员工调度程序应用程序，其中包含不同类型的输入字段。某些输入字段有时隐藏，有时不隐藏。我被要求将回车键用作 Tab 键，以便表单用户在创建员工日程表时可以使用 10 键。这是我解决问题的方法：
$(document).ready(function () {
var allInputs = $(':text:visible'); //(1)collection of all the inputs I want (not all the inputs on my form)
$(":text").on("keydown", function () {//(2)When an input field detects a keydown event
if (event.keyCode == 13) {
event.preventDefault();
var nextInput = allInputs.get(allInputs.index(this) + 1);//(3)The next input in my collection of all inputs
if (nextInput) {
nextInput.focus(); //(4)focus that next input if the input is not null
}
}
});
});
What I had to do was:
我必须做的是：
- Create a collection of all the inputs I want to consider when tabbing. in my case it is text inputs that are visible.
- Listen for a keydown event on the inputs in question, in my case all text field inputs
- When the enter is pressed on my text input, determine what input is next to be focused.
- If that input is valid, bring it into focus.
- 创建一个我在使用 Tab 键时要考虑的所有输入的集合。就我而言，它是可见的文本输入。
- 在有问题的输入上侦听 keydown 事件，在我的情况下是所有文本字段输入
- 当在我的文本输入上按下回车键时，确定接下来要聚焦的输入。
- 如果该输入有效，请将其放在焦点上。
回答by Tei
<input type="text" value="" onkeyup="doNext(this);"> a <br>
<input type="text" value="" onkeyup="doNext(this);"> b <br>
<input type="text" value="" onkeyup="doNext(this);"> c <br>
function doNext(el){
if(event.keyCode=='13'){
var nextEl = el.form.elements[el.tabIndex+1];
if (nextEl && nextEl.focus) nextEl.focus();
}
}
回答by Sunil Acharya
I am using this code for advancing to next input field. I hate to press TAB key. And this solution works in IE & Firefox:
我正在使用此代码前进到下一个输入字段。我讨厌按 TAB 键。此解决方案适用于 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>
HTML Content
HTML 内容
<form id="main">
<input name="" type="text" onkeypress="return tabE(this,event)">
<input type="submit" value="Ok">
</form>
回答by j-u-s-t-i-n
I believe using e.preventDefault(); is safer than returning false.
我相信使用 e.preventDefault(); 比返回 false 更安全。
