Question

我已经从this讨论中更改了我的代码，如果我按下输入它会转到第一个按钮，如果我按Tab键，它会转到第二个按钮。但现在我的问题是，从第一个按钮，如果我按下输入它不是调用该按钮，如果我再次从第二个按钮按Tab键，它不会是第一个按钮。所以我需要这些事情发生：

1）如果我按下Enter键，则从第一个/第二个按钮开始，按钮应该调用（单击）

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

你可以尝试这样的事情。

它有效，但可能有更好的方法。

＆＃13;

$(function() {
$(document).keydown(function(e) {
if (e.keyCode == 13) {
      $(".mybtn").is(":focus").trigger("click");
}
if (e.keyCode == 9) {
    if($("button#hel").is(":focus"))
    $("button#hel1").focus();
  else
    $("button#hel").focus();
}
return false;
});

$("button#hel").focus();
});

$("button#hel").click(function(){
  alert("hello press");
  });

$("button#hel1").click(function(){
  alert("hello1 press");
  });

＆＃13;

<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>

＆＃13;

Answer 2

亚历克西斯很接近，但是你想让焦点在第一次进入后转到按钮，所以你要做的就是设置一个探测器。您还希望它在按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>

输入按钮的键

2 个答案: