Question

我只是编写以下代码来测试按键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，但实际上当我单击“测试”按钮时，没有任何反应，代码中是否有任何错误？

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

Answer 2

我希望您希望以编程方式提交表单。

但我会先解释你当前的代码。

在Test()函数中，您正在触发文本框的keydown事件，但没有任何反应。由于您没有为文本框指定任何keydown事件处理程序，例如("#test_id").on('keydown', function(e) { })

我已经提供了这样的event handler，您可以看到，点击Test链接时会执行此操作。

您可以借助机器中本地创建的网页测试重定向到twitter并复制以下代码。

要在keydown事件上提交表单，$( "#form" ).submit()下方使用event handler，如果您打算以编程方式提交，可以在Test函数中直接使用keydown表单而不是注册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>

<强>代码：

＆＃13;

$result = \DB::table('db1.users')
    ->join('db2.users', 'db2.users.id', '=', 'db1.users.id')
    ->select('db1.users.id as db1_id', 'db1.users.email as db1_email', 'db2.users.*')
    ->get();

＆＃13;

Jquery输入元素模拟keydown

2 个答案: