javascript - 输入按钮的 key

Question

我已将代码从 this 更改为讨论的方式是，如果我按 Enter 键，它会转到第一个按钮，如果我按 Tab 键，它会转到第二个按钮。但现在我的问题是，从第一个按钮开始，如果我按 Enter 键，它不会调用该按钮，如果我再次按第二个按钮上的 Tab 键，它不会调用第一个按钮。所以我需要这些事情发生:

1)从第一个/第二个按钮，如果我按回车键，按钮应该调用(单击)

2)如果我从第二个按钮点击选项卡，它应该在第一个和第二个按钮之间移动。

这是我使用过的代码。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="hel">hello</button>
<button id="hel1" >hello1</button>
<script>
    $(function() {
        $(document).keydown(function(e) {
            if (e.keyCode == 13) {
                $("button#hel").focus();
            }
            if (e.keyCode == 9) {
                $("button#hel1").focus();
            }
        return false;
        });
    });
</script>

我应该做出什么改变？

Answer 1

Alexis 很接近，但您希望在第一次输入后焦点转到按钮，因此您要做的是设置一个检测器。您还希望它在您按下 Tab 时循环浏览按钮，如果按下 Tab 时按钮位于最后一个按钮，则返回到顶部。如果按钮获得焦点，则单击它，如果没有获得焦点，则转到第一个按钮。

试试这个:

$(function() {
	$(document).keydown(function(e) {
		var currentBtn = $(".mybtn:focus"),
		inputs = $(".mybtn"),
		currentIndex = inputs.index(currentBtn),
		next = inputs.filter(function (index) {
			if (currentIndex < inputs.length) {
				return index == currentIndex + 1;
			} else {
				return index == 0;
			}
		});

		if (e.keyCode == 13) {
			if (currentBtn.length) {
				currentBtn.click();
			} else {
				$(".mybtn").first().focus();
			}
		}
		if (e.keyCode == 9) {
			if (currentBtn.length) {
			if (currentBtn.is(".mybtn:last")) {
					$(".mybtn").first().focus();
		} else {
					next.focus();
				}
			} else {
				$(".mybtn").first().focus();
			}
		}
		return false;
	});
});

$("button#hel").on('click', function(){
	alert("hello press");
});

$("button#hel1").on('click', function(){
	alert("hello1 press");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="hel" class='mybtn'>hello</button>
<button id="hel1" class='mybtn' >hello1</button>