触发按钮，在文本框中单击Enter键会丢失其值

Trigger a button click on the Enter key in a text box misses its value

本文关键字：Enter 单击 按钮 文本      更新时间：2023-09-26

我有

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

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

也许使inputbox全局?

问题是输入键默认为提交表单，即使没有提交按钮。因此，您应该通过将事件绑定更改为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());
}
相关文章：