키보드 내비게이션을 통해 입력 [type = file]에 초점

StackOverflow https://stackoverflow.com/questions/1734478

문제

제목에서 알 수 있듯이, 나는 특정 일 때 '파일 선택'대화 상자를 열기를 원합니다. input 키보드 탐색을 사용하여 양식 필드를 통해 탭하여 집중합니다. 기본적으로 '파일 선택'창은 필드를 클릭 할 때만 열립니다.

이 문제에 대한 JS Bin에 페이지를 올렸습니다. http://jsbin.com/areba/edit

현재이 페이지는 다음 코드로 구성됩니다.

<!doctype html> 
<html> 
 <head> 
  <title>Sandbox</title> 
  <meta charset="utf-8"> 
 </head> 
 <body> 
  <form> 
   <input type="text"> 
   <input type="file">
  </form>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  <script>
   $(function() {
    $('input[type=text]').focus(function() {
     $(this).next('input[type=file]').css('background', 'lime').trigger('click');
    });
   });
  </script>
 </body> 
</html>

보시다시피 텍스트 입력과 파일 입력이 있습니다. 아이디어는 텍스트 입력이 초점을 수신하면 파일 입력이 '클릭'또는 무엇이든 나오고 '파일 선택'창이 열립니다.

그만큼 .css('background', 'lime') 진술은 잘 작동하는 것 같습니다. 그러나 호출 .trigger('click') 파일에서 입력은 전혀 아무것도하지 않는 것 같습니다.

(이것이 접근성 문제를 일으킬 수 있다는 것을 알고 있습니다. 제발, 논의하지 마십시오. 감사합니다.)

도움이 되었습니까?

해결책

이것은 파일 업로드 요소에 대한 Click () 이벤트를 구현하지 않았기 때문에 IE와 Safari (IRKINK)에서는 작동하지만 Opera 또는 Firefox에서는 작동하지 않습니다.

다른 팁

보안상의 이유로 대화 상자를 활성화 할 수 있을지 의심됩니다. 브라우저에 따라 실제 클릭 이벤트가 발생해야합니다.

Flash/Flex 에이 요구 사항이 있다는 것을 알고 있습니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top