触发按钮单击文本框中的 Enter 键会丢失其值答案

【问题标题】：Trigger a button click on the Enter key in a text box misses its value触发按钮单击文本框中的 Enter 键会丢失其值
【发布时间】：2013-03-29 19:17:44
【问题描述】：

我有

HTML：

<form  action="" method="post"  id="contactForm">
    <input id='inputbox' name="inputbox" type="text" />
    <button type="button" id='search'> search </button>
</form>

JavaScript

$(document).ready(function() {
    $("#inputbox").keyup(function(event){
        if(event.keyCode == 13){
            $("#search").click();
        }
    });

    $('#search').click(function(){
         var inputbox= $("#inputbox").val();  
        //stuff
    });
});

输入框当我按下回车键时值什么都没有，但是如果我点击按钮它可以完美地使用相同的输入值

也许使 输入框 全球化？

【问题讨论】：

你试过event.which而不是event.keyCode吗？您是否阻止了表单提交！
试试$("#search").trigger("click");
@adeneo - 没关系，jQuery 已经内置了。
那$('#contactForm').submit();
@Titanium - 不，jQuery normalizes event.which，但不是 keyCode。

标签： javascript jquery

【解决方案1】：

问题是输入键默认提交表单，即使没有提交按钮。因此，您应该通过将事件绑定更改为keypress 并使用event.preventDefault() 来阻止提交，如下所示：

$("#inputbox").keypress(function(event){
    if(event.keyCode == 13){
        event.preventDefault();
        $("#search").click();
    }
});

或者，您可以使用.submit() 来触发您的函数，更改要提交的输入类型，并避免单独处理按键和点击。

HTML：

<form action="" method="post" id="contactForm">
    <input id='inputbox' name="inputbox" type="text" />
    <input type="submit" value="Search">
</form>

JavaScript：

$(document).ready(function() {
    $("#contactForm").submit(submitSearch);
}); 

function submitSearch(event) {
     event.preventDefault();

     //do other stuff
     alert($("#inputbox").val());
}

【讨论】：