jQuery обнаруживает изменение радиовхода, приспосабливая использование клавиатуры

Question

У меня есть набор радиокнопок на форме, и с помощью jQuery я хочу определить, когда пользователь изменил значение этих входов.Я могу сделать что-то вроде $('input.myinputs').on('change', ... );, за исключением того, что если пользователь использует клавиатуру для навигации, он запускает каждый раз, когда они перемещаются от одной кнопки к следующей.Другими словами, он запускается несколько раз в процессе выбора пользователем.(Щелчок мышью работает нормально.)

Я хочу убедиться, что функция срабатывает только тогда, когда пользователь покидает группу радиосвязи (набор одноименных радиокнопок).Я должен иметь возможность подключаться к группе радиостанций, перемещаться вверх или вниз с помощью клавиш со стрелками, а затем , когда я переключаюсь из группы радиостанций , ТО затем функция срабатывает один раз.

Есть лиспособ сделать это?Все, что я пробовал, срабатывает каждый раз, когда я нажимаю клавишу со стрелкой, если фокус находится внутри группы.

Пример:

У вас есть маленькая форма:

1. текстовый ввод
2. радиогруппа, содержащая четыре опции, помеченные A, B, C, D;и
3. второй текстовый ввод

Нажмите на первый текстовый ввод.Теперь положи свою мышь и нажми клавишу Tab.Используйте стрелки, чтобы выбрать третий вариант.Теперь нажмите Tab, чтобы перейти ко второму вводу текста.Это вызывает событие «изменить / размыть» в радиогруппе три раза - когда фокус переместился в радиогруппу, которая выбрала A;затем, когда вы указали стрелку к B, затем снова, когда вы указали стрелку к C.

Я хочу, чтобы событие сработало один раз , когда я перемещаю фокус с группы радиосвязи на второй текстовый ввод (чтовне группы радиосвязи), но только если я изменил то, что было выбрано в группе радиосвязи.Мне нужно «при изменении» для группы , а не для каждого отдельного параметра.

Конечно, она все равно должна работать для пользователей мыши или мобильных (сенсорных) пользователей;Я пользуюсь клавиатурными навигаторами, признавая, что большинство пользователей используют мышь или палец.

Пример 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

Единственное, что приходит мне в голову, это обнаружение 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>

Answer 2

Решено, с помощью @ evik-ghazarian и еще один вопрос: Различить запуск мыши и клавиатуры при нажатии

Мы слушаем keydown или change.Если нажата клавиша со стрелкой, установите логическое значение так, чтобы мы игнорировали событие change, которое должно сработать.В противном случае (при условии, что нам не сказали игнорировать change на предыдущем шаге), следите либо за change, либо за вкладкой keydown, сопровождаемой фактическим изменением значения.

$(document).ready(function () {
    let radioGroup = $( 'input[name=R1]' );
    let initialValue = radioGroup.filter( ':checked' ).val();
    let firstEvent = true;
    radioGroup.on( 'keydown change', function( e ) {
        let newValue = $( this ).filter( ':checked' ).val();
        if( e.type === 'keydown' && [37,38,39,40].indexOf( e.keyCode ) !== -1 ) { // arrow key
            firstEvent = false;
        } else if (
            true === firstEvent && ( // ignore change event if arrow key, but recognize change when tabbing out
                ( e.type === 'keydown' && e.keyCode === 9 && newValue !== initialValue ) || // tab key
                ( e.type === 'change' )
            )
        ) {
            // **Do whatever you want to do on change here**

            alert( "value = " + newValue );
            initialValue = newValue;
        } else {
            firstEvent = true;
        }
    } );
});

Протестировано2019-09-27 в Firefox 69, Chrome 77, Edge 44, IE 11 и Safari для iOS 13.0.

Предложения по улучшению приветствуются.Я хотел бы иметь возможность каким-то образом абстрагировать это в функцию, но мой JS-fu не достоин.Я ненавижу идею копировать / вставлять всю эту кучу каждый раз, когда я хочу ее использовать, но я должен быть в состоянии настроить часть «делать что-то здесь», и я не могу избавиться от этих проклятых глобалов.