在文本框中按下回车键触发按钮点击事件后丢失其值。

Question

I have

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
    });
});        

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

也许将输入框设为全局变量？

- edgarmtze

---

你尝试过使用 event.which 而不是 event.keyCode 吗？你阻止了表单提交吗！ - adeneo

尝试执行 $("#search").trigger("click");。 - Oliver Tappin

@adeneo - 那没关系，jQuery 已经内置了这个功能。 - Oliver Tappin

$('#contactForm').submit(); 是什么意思？ - TJ Fogarty

@Titanium - 不是的，jQuery 规范化事件.which，但不规范化keyCode。 - adeneo

这就是我的意思 - jQuery 对此进行了规范化。关键是，你不必担心它。在这里查看：https://dev59.com/o2855IYBdhLWcg3wNhd1 - Oliver Tappin

Answer 1

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

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

或者，您可以使用 .submit() 来触发您的函数，将输入类型更改为 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());
}

- metadept