触发按钮,单击文本框中的Enter键,忽略其值

时间:2013-03-29 19:17:44

标签: javascript jquery

我有

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
    });
});        
当我按下回车键时,

输入框值没有任何值,但是如果我点击按钮它与相同的输入值完美配合

是否可以将输入框设为全局?

1 个答案:

答案 0 :(得分:9)

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