2016-11-28 1 views
1

를를 keyDown 시뮬레이션 : 코드가 제대로 작동jQuery를 입력 요소 (입력) 키 기능을 시뮬레이션의 juqery 코드가 작동하는지 난 그냥 테스트하기 위해 다음과 같은 코드를 작성

<html> 
<meta http-equiv=Content-Type content="text/html;charset=utf-8"> 
<script type="text/javascript" src="jquery-3.1.1.min.js"></script> 
<script type="text/javascript"> 
     function Test() 
     { 
      var e = jQuery.Event("keydown"); 
      e.keyCode = 13; 
      $("#test_id").trigger(e); 
     } 
</script> 
<body> 
    <div> 
     <form method="get" id="form" action="http://www.twitter.com"> 
      <input type="text" value="" name="test_id" id="test_id" /> 
      <input type="text" value="" name="test_id1" id="test_id1" /> 
      <button type="submit">go</button> 
     </form> 
     <a href="javascript:Test()" id="btn_nfc" ><font size="10">Test</font></a> 
    </div> 
</body> 
</html> 

경우, 다음이 twitter.com로 리디렉션됩니다 만, 실제로 "테스트"버튼을 클릭해도 아무 일도 일어나지 않았습니다. 코드에 문제가 있습니까?

+0

왜 당신이 그것을 위해 jQuery를해야합니까? 제출시 조치를 취할 것인가? – ScanQR

+0

@TechBreak 예, 제출을 위해, 괜찮습니다. 그러나 양식이나 제출이없는 어딘가에 있습니다. 그래서 실제로 "입력"keydown 이벤트를 시뮬레이트하려고합니다. – user440446

답변

1

테스트 링크가 아닌 양식에서 keydown 이벤트를 사용해야합니다. 난 당신이 프로그래밍 양식을 제출하고자하는 희망

$(function(){ 
 
    $('form').on('keydown', function(e){ 
 
     e.stopPropagation(); 
 
     if(e.keyCode == 13) { 
 
     alert('testing'); 
 
     } 
 
    }) 
 

 
}) 
 
    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 
    <div> 
 
     <form method="get" id="form" action="http://www.twitter.com"> 
 
      <input type="text" value="" name="test_id" id="test_id" /> 
 
      <input type="text" value="" name="test_id1" id="test_id1" /> 
 
      <button type="submit">go</button> 
 
     </form> 
 
     <a href="javascript:Test()" id="btn_nfc" ><font size="10">Test</font></a> 
 
    </div> 
 
</body>

+0

예, 경고 기능은 잘 작동하지만 아무 것도 일어나지 않습니다. , 입력에서 "엔터"키를 누르면 새로운 URL 페이지로 이동합니다 – user440446

+0

트위터 닷컴으로 리디렉션하고 싶습니다. 리디렉션되지 않습니다. 스 니펫에있는 것이 아니라 코드에서이 코드를 사용하여 작동하는지 확인하십시오. –

1

아래 코드를 사용해보십시오.

하지만 현재 코드를 먼저 설명하겠습니다.

Test() 함수 내에서 keydown 이벤트가 발생하고 아무 반응이 없습니다. 당신은 하나의 ("#test_id").on('keydown', function(e) { })

같은 텍스트 상자에 지정된 keydown 이벤트 처리기를 가지고 있지 않기 때문에 나는 이러한 event handler을 준하고 Test 링크를 클릭하면,이 실행지고 볼 수 있습니다.

컴퓨터에서 로컬로 생성 된 웹 페이지와 아래 코드를 복사하여 도움을 요청하여 twitter으로 리디렉션을 테스트 할 수 있습니다. 당신이 의도 프로그래밍 keydown 이벤트 핸들러를 등록보다는 양식을 제출하고 Test에서 트리거 할 경우

keydown 이벤트에 양식을 제출하려면 $("#form").submit()는 직접 Test 함수 내에서 사용할 수있는 event handler 내부에 아래 사용 기능.

당신은 다음과 같이 사용할 수 있습니다

,

 function Test() 
     { 
      $("#form").submit(); 
     } 

코드 :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<html> 
 
<meta http-equiv=Content-Type content="text/html;charset=utf-8"> 
 
<script type="text/javascript" src="jquery-3.1.1.min.js"></script> 
 
<script type="text/javascript"> 
 
     function Test() 
 
     { 
 
      // You can uncomment and use the one liner to submit the form 
 
      //$("#form").submit(); 
 

 
      var e = jQuery.Event("keydown"); 
 
      e.keyCode = 13; 
 
      $("#test_id").trigger(e); 
 
     } 
 
    
 
     // registering 'keydown' event handler 
 
     $(document).ready(function(){ 
 
     $("#test_id").on('keydown', function(e) { 
 
      if(e.keyCode === 13) { 
 
      console.log('Form submitted'); 
 
      $("#form").submit(); 
 
      } 
 
     }); 
 
     }); 
 
</script> 
 
<body> 
 
    <div> 
 
     <form method="get" id="form" action="http://www.twitter.com"> 
 
      <input type="text" value="" name="test_id" id="test_id" /> 
 
      <input type="text" value="" name="test_id1" id="test_id1" /> 
 
      <button type="submit">go</button> 
 
     </form> 
 
     <a href="javascript:Test()" id="btn_nfc" ><font size="10">Test</font></a> 
 
    </div> 
 
</body> 
 
</html>

+0

파일에 jquery 코드가 없을 때 input 요소에서 "Enter"키를 누르면 페이지가 새 URL로 리디렉션되므로 "Enter"키 이벤트를 시뮬레이트하고 싶습니다 . BTW, 나는 sumit 함수가 잘 작동 할 수 있다는 것을 알고 있지만, 폼이나 submit을 포함하지 않는 어딘가가 있습니다. – user440446

+0

코드를 어떻게 작성하라고 조언 할 수 있습니까? – Aruna

관련 문제