我使用了jQuery制作了一个页面，在加载时它会自动选择第一个文本框。当按下ENTER键后，我希望它能够移动到下一个字段。
$('.barcodeField input').bind('keyup', function(event) {
if(event.keyCode==13){
$("this + input").focus();
}
});
我在网上找不到任何有效的东西。我已经搜遍了论坛。
按下回车键时，如何选择下一个文本框？使用JQuery。
9
- Grant Unwin
4
7个回答
17
我创建了一个小函数可以完成你需要的事情。这是我使用的版本，因此你可能需要更改类名，但是你应该能够理解。
<script type="text/javascript">
$(document).ready(function(){
$(".vertical").keypress(function(event) {
if(event.keyCode == 13) {
textboxes = $("input.vertical");
debugger;
currentBoxNumber = textboxes.index(this);
if (textboxes[currentBoxNumber + 1] != null) {
nextBox = textboxes[currentBoxNumber + 1]
nextBox.focus();
nextBox.select();
event.preventDefault();
return false
}
}
});
})
</script>
基本上：
- 获取所有与 .vertical 匹配的输入字段
- 找到当前文本框是哪一个
- 找到下一个文本框
- 将焦点设置在下一个文本框上
- Martin Parry
1
有没有想法，如果你到达输入的末尾，就回到索引0，类似这样制作一个圆圈？ - Munkhdelger Tumenbayar
11
你应该使用：
$(this).next('input').focus();
- Sarfraz
1
3如果下一个同级元素是
<input>，这将起作用，但如果它是<label>或其他内容，则不会找到匹配项。 - user1137162
试一下这个：
(function($){
$.fn.enterNext = function(){
var _i =0;
$('input[type=text], select',this)
.each(function(index){
_i = index;
$(this)
.addClass('tab'+index)
.keydown(function(event){
if(event.keyCode==13){
$('.tab'+(index+1)).focus();
event.preventDefault();
}
});
})
$( "input[type=submit]",this ).addClass('tab'+(_i+1));
}})(jQuery);
使用方法：
$('form.element').enterNext();
在我的情况下，这是最好的解决方案，因为.next()函数对于它们所在的分支DOM外的元素非常严格。最好的方法是强制一个索引。
抱歉我的英语不好...
- penacho123
0
这段代码对我有效
HTML：
<div class="row">
<div class="col-md-3"> Name </div>
<div class="col-md-3"> <input type="text" /> </div>
</div>
<div class="row">
<div class="col-md-3"> Email</div>
<div class="col-md-3"> <input type="email" /> </div>
</div>
Jquery 代码：
$(document).on('keypress', 'input,select', function (e) {
if (e.which == 13) {
e.preventDefault();
$(this).parent().parent().next('div').find('input').focus();
}
});
- Farman Ameer
1
如果下一个输入不是“input”元素，则此方法将无法正常工作。 - GrumpyCrouton
0
基本上，您只需要将DOM元素放在某种结构中，以便可以选择下一个元素。我建议利用tabindex，但任何让您拥有定义顺序的东西都可以工作。
- Charlie Martin
0
这是我想出来的解决方案。我的问题在于我需要保持tabindex，即它必须完全像按Tab键一样工作。它同时使用下划线和jquery。
我留下了我的调试代码：
我留下了我的调试代码：
try {
var inputs = $("input[id^=tpVal-]");
var sortedInputs = _.sortBy(inputs, function(element){
var tabIndex = $(element).attr('tabindex');//debugging
var id = $(element).attr('id');//debugging
console.log(id +" | "+ tabIndex +" | "+ $(element));//debugging
return parseInt($(element).attr('tabindex'));
});
$(sortedInputs).each(function (index, element) {
$(element).keyup(function(event){
if(event.keyCode==13) {
var $thisElement = $(element);//debugging
var nextIndex = index+1;//debugging
var $nextElement = $(sortedInputs[nextIndex]);
var thisId = $thisElement.attr('id');//debugging
var nextId = $nextElement.attr('id');//debugging
console.log("Advance from "+thisId+" to "+nextId);//debugging
if($nextElement!=undefined) {
$(sortedInputs[index + 1]).focus();
}
}
});
});
} catch (e) {
console.log(e);
}
- Alan B. Dee
0
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<input id="122" class='TabOnEnter' tabindex="1" /><br>
<input id="123" class='TabOnEnter' tabindex="2" /><br>
<input type="text" name="abc" /><br>
<input type="text" name="abc1" /><br>
<input type="text" name="abc2" /><br>
<input type="text" name="abc3" class='TabOnEnter' tabindex="3" /><br>
<input class='TabOnEnter' tabindex="4" /><br>
<input class='TabOnEnter' tabindex="5" /><br>
<input class='TabOnEnter' tabindex="6" /><br>
<!-- <textarea class='TabOnEnter' tabindex="6">Hi, I am a test area</textarea>-->
<input type="submit" value="submit" class='TabOnEnter' tabindex="7">
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
$(document).on("keypress", ".TabOnEnter", function (e)
{
//Only do something when the user presses enter
if (e.keyCode == 13)
{
var nextElement = $('[tabindex="' + (this.tabIndex + 1) + '"]');
console.log(this, nextElement);
if (nextElement.length)
nextElement.focus()
else
$('[tabindex="1"]').focus();
}
});
//Hidden inputs should get their tabindex fixed, not in scope ;)
//$(function(){ $('input[tabindex="4"]').fadeOut(); })
</script>
</body>
</html>
- Hrushi
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接
data-*属性来标记您想要该功能的字段/表单/容器。 - Joel Purra