[英]How to force “enter key” to act as “tab key” using javascript?
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.我正在一个充满要填写的表格的网站上工作,我需要在按下转义按钮时将焦点移动到下一个输入控件,就像按下“tab”一样。 I found code to move focus when keypressed is 13 but this need to take the ID of element to focus on
我找到了在按键为 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 中
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" />
handle keypress instead and return false back to the browser:改为处理按键并将 false 返回给浏览器:
http://jsfiddle.net/EeyTL/ http://jsfiddle.net/EeyTL/
<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>
You'll need to explicitly set the tabindex
property of the input fields for a generic solution.您需要为通用解决方案显式设置输入字段的
tabindex
属性。 Something like就像是
<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().此解决方案使用 jquery 为页面上的所有输入类型元素分配事件处理程序,将焦点设置为具有下一个最高 tabindex 属性的元素,并在使用 e.preventDefault() 按下 Enter 时防止表单提交。 Here's a jfiddle
这是一个jfiddle
<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();
}
}
Althought the post is old, I hope my answer can help someone in need.虽然帖子很旧,但希望我的回答能帮助到有需要的人。 I have a smilar situation:
我有一个类似的情况:
I have a very large form for 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 key so the users of the form could use the 10-key when creating thier employees schedule.
我被要求将回车键用作 Tab 键,以便表单用户在创建员工日程表时可以使用 10 键。 Here is how I solved my problem:
这是我解决问题的方法:
$(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:我必须做的是:
I am using this code for advancing to next input field.我正在使用此代码前进到下一个输入字段。 I hate to press TAB key.
我讨厌按 TAB 键。 And this solution works in IE & 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>
HTML Content HTML 内容
<form id="main">
<input name="" type="text" onkeypress="return tabE(this,event)">
<input type="submit" value="Ok">
</form>
Here is a easy solution for you.这是一个简单的解决方案。 Basically you include the enter2tab.js file and then add the enter2tab class on each object where you want enter to be treated as js.
基本上,您包含 enter2tab.js 文件,然后在您希望 enter 被视为 js 的每个对象上添加 enter2tab 类。
https://github.com/AndreasGrip/enter2tab https://github.com/AndreasGrip/enter2tab
You can obviously look at the code to understand what it does and how..您显然可以查看代码以了解它的作用和方式。
I believe using e.preventDefault();我相信使用 e.preventDefault(); is safer than returning false.
比返回 false 更安全。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.