2016-11-28 60 views
1

我只是写了下面的代码来测试是否ENTER键功能仿真的juqery代码工作:jQuery的输入元素模拟的keydown

<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是的,提交,这是好的,但也有地方,没有形式或提交,所以实际上我尝试模拟的“Enter” 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

是,报警功能效果很好,但没有别的发生,而当我们按下输入“ENTER”键,将进入到新的URL页面 – user440446

+0

你想重定向到twitter.com的权利,是不是重定向。它肯定不在代码片段中,但在你的代码中试试看看它是否可行。 –

1

我希望你想以编程方式提交表单的代码。

但我将首先解释当前的代码。

Test()函数中,您触发文本框的​​事件,并且什么也没有发生。既然你没有指定文本框像一个("#test_id").on('keydown', function(e) { })

任何​​事件处理我已经给出了这样的event handler,你可以看到,这是得到执行,当您点击链接Test

您可以在您的计算机本地创建一个网页的帮助和复制下面的代码测试重定向到twitter

提交关于​​事件的形式,$("#form").submit()下面使用的event handler,你可以在Test函数内部直接使用里面,如果你打算以编程方式提交表单,而不是注册​​事件处理程序,并从Test触发它功能。

您可以使用这样的,

 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代码时,我们按下输入元素中的“Enter”键,页面将重定向到新的url,所以我只想模拟“Enter”键事件。顺便说一句,我知道sumit函数可以很好地工作,但也有一些地方不包含表单或提交。 – user440446

+0

你可以告诉你怎么想的代码是什么? – Aruna