javascript - jQuery 检测 radio 输入变化，同时适应键盘使用

Question

我在表单上有一组单选按钮，我想使用 jQuery 检测用户何时更改了这些输入的值。我可以执行 $('input.myinputs').on('change', ... ); 之类的操作，除非用户使用键盘进行导航，否则会触发 每次他们从一个按钮移动到下一个按钮。换句话说，它会在用户进行选择的过程中多次触发。 (用鼠标点击就可以了。)

我想确保该函数仅在用户离开单选组(一组同名单选按钮)时触发。我应该能够切换到单选组，通过箭头键向上或向下导航，然后当我退出单选组时，该功能将触发一次。

有没有办法做到这一点？如果焦点在组内，每次我按下箭头键时，我尝试过的所有内容都会触发。

示例:

你有一个小表格:

1. 文本输入
2. 一个单选组，包含四个标记为 A、B、C、D 的选项；和
3. 第二个文本输入

点击第一个文本输入。现在放下鼠标并按下 Tab 键。使用箭头选择第三个选项。现在点击 Tab 移动到第二个文本输入。这会触发 radio 组上的“更改/模糊”事件 3 次——当焦点移动到选择 A 的 radio 组时；然后当你指向 B 时，当你再次指向 C 时。

我希望当我将焦点从单选组移动到第二个文本输入(即，单选组外)时一次触发事件，但前提是我更改了所选内容在 radio 组中。我需要为组而不是每个单独的选项“更改”。

当然，它应该仍然适用于鼠标或移动(触摸)用户；我接受键盘导航器，同时承认大多数用户使用鼠标或他们的手指。

示例 HTML:

<input type="text">
<div class="inputApprove">
    <label><input type="radio" name="R1" value="A" checked="checked"> A</label>
    <label><input type="radio" name="R1" value="B"> B</label>
    <label><input type="radio" name="R1" value="C"> C</label>
    <label><input type="radio" name="R1" value="D"> D</label>
</div>
<input type="text">

Answer 1

我唯一想到的是检测 radio 输入上的 TAB KEY。 我相信这是您最好的选择。

$("input[name='gender']").on('keydown', function(e){
	if (e.keyCode == 9){ //if tab key is pressed
  $("input[name='gender']").blur(function(){
  	$(".output").append("<p>Changed!</p>");  
  });  
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="form">
  <input type="radio" name="gender" value="male"> Male<br>
  <input type="radio" name="gender" value="female"> Female<br>
  <input type="radio" name="gender" value="other"> Other<br> 
  <p>
  Say Hello:
  </p>
  <input type="text" name="hello">
</form>
<div class="output">

</div>