jQueryの入力要素ENTERキー機能シミュレーションのjuqeryコードが動作するかどうか、私はちょうどテストするには、次のコードを記述

をKeyDownイベントシミュレーション：コードが正しく動作jQueryの入力要素ENTERキー機能シミュレーションの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にリダイレクトされますが、実際に "Test"ボタンをクリックしても何も起こりませんでしたが、コードに何か間違っていますか？

出典

2016-11-28 user440446

？提出すると、アクションを打つだろうか？ – ScanQR

@TechBreakはい、送信用にはOKですが、フォームや送信していない場所がありますので、実際には "Enter"キーダウンイベントをシミュレートしようとしています – user440446

テストリンクではなく、フォーム上で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>

出典

2016-11-28 04:26:55

はい、アラート機能はうまく機能しますが、入力中に「Enter」キーを押すと、新しいURLページに移動します – user440446

twitter.comにリダイレクトしたいのですが、リダイレクトしません。スニペットには含まれていませんが、コード内でこれを試して、それが動作するかどうかを確認してください。 –

の下にこのコードを試してみてください。

しかし、私はあなたの現在のコードを最初に説明します。

Test()ファンクションの中で、テキストボックスのイベントが発生しましたが、何も起こりません。あなたは、私は、このようなevent handlerを与えているし、あなたが見ることができる1 ("#test_id").on('keydown', function(e) { })

のようなテキストボックスに指定した任意のイベントハンドラを持っていないので、あなたはTestリンクをクリックすると、これが実行されつつあります。

twitterへのリダイレクトは、お使いのマシンにローカルに作成されたWebページの助けを借りてテストし、以下のコードをコピーすることができます。あなたが意図プログラムでイベントハンドラを登録するのではなく、フォームを送信してTestからそれをトリガする場合

がイベントでフォームを送信するには、 $("#form").submit()は、あなたが直接 Test関数内で使用することができます event handler内で以下で使用されます関数。

あなたは

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

はコード、次のように使用することができます：あなたはそれのためのjQueryを必要とする理由

<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>

出典

2016-11-28 04:38:03 Aruna

ファイル内にjqueryコードがなく、input要素の "Enter"キーを押すとページが新しいURLにリダイレクトされるので、 "Enter"キーイベントをシミュレートするだけです。ところで、私はsumit関数がうまくいくことは知っていますが、フォームやサブミットを含まないどこかにあります。 – user440446

コードをどのようにしたいかアドバイスできますか？ – Aruna

jQueryの入力要素ENTERキー機能シミュレーションのjuqeryコードが動作するかどうか、私はちょうどテストするには、次のコードを記述

答えて

関連する問題