라디오 버튼이 키보드 탐색으로 선택되지 않도록 하시겠습니까?

Question

자동으로 선택하지 않고 화살표 키를 사용하여 라디오 버튼 집합을 탐색 할 수 있습니까? 현재 사용자가 라디오 버튼을 선택하고 .click()을 사용할 때 닫으려는 팝업이 있지만 화살표 키가있는 팝업에서 라디오 버튼을 탐색하면 각 탐색이 팝업 닫히고 사용자는 다시 열려면.
제안 사항?
감사합니다.

편집 : 이것은 내 라이브 데모입니다 : jsfiddle.net/TKWzH/4
진짜 일 때문에 입력하고 하나에 mousedown를 keyDown 결합하는 방법은 무엇입니까, 개폐 기능보다 더 많은가? 이 같은

$("#popup2 input:radio").bind('keydown keyCode == 13', 'mousedown' function() {
$('#popup2').css('display', 'none'); });

뭔가처럼? 나는 이것이 틀린 것임을 깨닫고 아마 이해가되지 않지만.

Answer 1

이 동작은 특정 브라우저에만 적용됩니다. IE는 화살표 키를 기반으로 라디오를 선택하는 것처럼 보입니다. 반면 Chrome은 그렇지 않습니다.

즉, jQuery를 통해 keydown 이벤트를 방지하면이 동작을 비활성화 할 수 있습니다. 이 문서 전체에 적용되지 않도록 I는 DIV (또는 라디오 버튼을 감싸고 다른 요소)에이 일을하는 것이 좋습니다 : 이것을 달성하는 또 다른 방법이있다

$('div.wrap').keydown(function(e) { 

    if (e.which > 36 && e.which < 41) { 
     e.preventDefault(); 
    } 

    var $checkedRadio = $('input[type=radio]:checked'); 
    if ($checkedRadio.size() > 0) { 
     $checkedRadio.removeAttr('checked'); 
     if (e.which == 38 || e.which == 39) { 
      var $nextRadio = $checkedRadio.next('input[type=radio]'); 
      if ($nextRadio.size() > 0) { 
       $nextRadio.attr('checked', 'checked'); 
      } else { 
       $('input[type=radio]:first').attr('checked', 'checked'); 
      } 
     } 
     else if (e.which == 37 || e.which == 40) { 
      var $prevRadio = $checkedRadio.prev('input[type=radio]'); 
      if ($prevRadio.size() > 0) { 
       $prevRadio.attr('checked', 'checked'); 
      } 
      else { 
       $('input[type=radio]:last').attr('checked', 'checked'); 
      } 
     } 
    } 

});​ 

, 그리고 추적하는 것입니다 어떤 키를 누르면, 당신의 클릭으로 그것을 확인한다() 이벤트 : 여기

var keyPressed; 

$('input').click(function(e) { 
    if (keyPressed && keyPressed > 36 && keyPressed < 41) { 
     e.preventDefault(); 
     e.stopPropagation(); 
     // key pressed during click 
    } 
    else{ 
     // normal click 
    } 
}); 

$(document).keydown(function(e) { 
    keyPressed = e.which; 
}); 

$(document).keyup(function(e) { 
    keyPressed = null; 
}); 

Answer 2

는 @ 데릭-hunziker에 의해 주어진 두 번째 예제와 유사한 이벤트 수준을, 오프 작동하는보다 일반화 된 크로스 브라우저 솔루션입니다

$(function() { 
    var navKey, getCheck; 
    $('input[type=radio]').keydown(function(e) { 
     navKey = (e.which >= 37 && e.which <= 40); 
     if (navKey) { 
      getCheck = $("input:radio[name='" + e.target.name + "']:checked")[0]; 
     } else if (e.which == 13) {$(e.target).click();} 
    }).keyup(function(e) { 
     navKey = null; 
     getCheck = null; 
    }).click(function(e) { 
     if (navKey) { 
      e.preventDefault(); 
      e.stopPropagation(); 
      if (getCheck) {getCheck.checked = true;} 
      else {e.target.checked = false;} 
     } else { 
      // Perform intended click/space/enter action here 
     } 
    }); 
}); 

변경 사항은 Chrome에서 기본 값이 없을 때 첫 번째 탐색 이동이 요소를 선택하게하고 Internet Explorer에서 이동할 때마다 현재 선택 항목을 비워 두는 또 다른 문제를 유발하는 Chrome 관련 문제를 처리합니다. 이 기능은 keydown 이벤트의 "else if"문을 제거하여 비활성화 할 수 있지만 click 이벤트가 enter 키를 통해 트리거되도록합니다.

작성자의 질문보다 복잡한 것은 있지만 일반적으로 여러 브라우저에서보다 안정적인 환경을 제공합니다.