2016-11-28 47 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