This question already has answers here:
How to simulate TAB on ENTER keypress in javascript or jQuery
(8个答案)
5年前关闭。
有一个时髦的我不能完全解决。我正在使用可满足从客户接收信息的Div的功能,通过Tab可以很好地工作,但是如果我可以直接按Enter键进入下一个div并不确定如何实现此功能,它将更加快捷。
我在这里创建了这个小提琴:http://jsfiddle.net/zkDfm/
编辑
如果您像前面提到的那样有多个块,则只需多做一些工作。
DEMO
(8个答案)
5年前关闭。
有一个时髦的我不能完全解决。我正在使用可满足从客户接收信息的Div的功能,通过Tab可以很好地工作,但是如果我可以直接按Enter键进入下一个div并不确定如何实现此功能,它将更加快捷。
我在这里创建了这个小提琴:http://jsfiddle.net/zkDfm/
<div class="card shadow rounded">
<div class="card-content one-third">
<div class="list-title">Owner Details</div>
<ul class="detail-list">
<li class="button rounded"><a class="list-heading">Mr:</a> <a class="list-result-edit" contenteditable="true"></a></li>
<li class="button rounded"><a class="list-heading">Mrs:</a> <a class="list-result-edit" contenteditable="true"></a></li>
<li class="button rounded"><a class="list-heading">Email:</a> <a class="list-result-edit" contenteditable="true"></a></li>
<li class="button rounded"><a class="list-heading">Mobile No:</a> <a class="list-result-edit" contenteditable="true"></a></li>
<li class="button rounded"><a class="list-heading">Phone No:</a> <a class="list-result-edit" contenteditable="true"></a></li>
<li class="button rounded"><a class="list-heading">Address:</a> <a class="list-result-edit" contenteditable="true"></a></li>
</ul>
</div>
最佳答案
您可以在这里查看:
DEMO
因此,您的Enter keyevent
将是:
$(".list-result-edit").keypress(function(e) {
if(e.which == 13) {
e.preventDefault();
$(e.target).parent().next().children().focus();
}
});
编辑
如果您像前面提到的那样有多个块,则只需多做一些工作。
$(".list-result-edit").keypress(function(e) {
if(e.which == 13) {
e.preventDefault();
if($(e.target).parent().is(":last-child")) {
$(e.target).parents(".card-content").next().find(".list-result-edit:first").focus();
}
else {
$(e.target).parent().next().children().focus();
}
}
});
DEMO