Jquery响应回车键直接提交表单操作代码

以下是关于Jquery响应回车键直接提交表单操作代码的完整攻略。

1. 实现方法

Jquery可以监听键盘事件，并且可以获取当前输入框的值，从而判断是否需要执行相应操作。

常用的键盘事件有keydown和keyup，分别代表按下和抬起键的时候触发。

代码实现如下：

$(document).ready(function(){
   //监听按键事件
   $('input').keydown(function(event){
       //判断是否是回车键
       if(event.which == 13){
           //执行相应操作
           $('form').submit();
       }
   });
});

以上代码中：

• $(document).ready(function(){ ... })：表示文档加载完成后执行的函数。
• $('input')：表示选择所有的input元素。
• keydown：表示监听按键事件。
• event.which：表示当前按下的键的代码值，其中13代表回车键。
• $('form').submit()：表示提交表单操作。

此方法可以在代码中引入Jquery库后直接使用。

2. 代码示例

下面是两个示例说明：

示例1

HTML代码如下：

<form id="myForm">
  <input type="text" placeholder="请输入...">
  <button type="submit">提交</button>
</form>

JavaScript代码如下：

$(document).ready(function(){
   //监听按键事件
   $('input').keydown(function(event){
       //判断是否是回车键
       if(event.which == 13){
           //执行相应操作
           $('#myForm').submit();
       }
   });
});

以上代码中，用户在文本框中按下回车键时，表单将会被提交。

示例2

HTML代码如下：

<form id="myForm">
  <input type="text" placeholder="请输入...">
  <button type="button" onclick="submitForm()">提交</button>
</form>

JavaScript代码如下：

function submitForm(){
    $('#myForm').submit();
}

$(document).ready(function(){
    //监听按键事件
    $('input').keydown(function(event){
        //判断是否是回车键
        if(event.which == 13){
            //执行相应操作
            submitForm();
        }
    });
});

以上代码中，用户在文本框中按下回车键时，调用了JavaScript函数submitForm()，该函数会执行表单的提交。在按钮的onclick属性中也调用了该函数。