Jquery textbox响应回车键

悬赏园豆：10 [已解决问题] 解决于 2014-09-29 12:43

我做了一个网页（http://shufazidian.sinaapp.com/），当用户输入一个汉字的时候，点击搜索按钮可以搜索对应的书法字。

现在的问题是，每次搜索的时候必须点击搜索按钮，我想加一个功能，就是输入完汉字直接按回车键就可以搜索。但是没有成功。

响应回车键的代码如下（来自SO)

// User can also search by pressing the Enter key on keyboard
                $("#myhanzi").keypress(function(e){
                    if (e.which == 13) {
                        $("#searchbutton").click();
                    }
                })

点击搜索按钮的代码如下：

$(document).ready(function(){
                var lastSearch = "";

                $("#searchbutton").click(function(){

                    // Don't update the page if user search same word multiple times.
                    var newSearch = $("#myhanzi").val();
                    if (lastSearch == newSearch) {
                        return;
                    }
                    lastSearch = newSearch;

                    $.post("php/getPictureInfo.php",
                    {
                        hanzi:$("#myhanzi").val()
                    },
                    function(data, status) {
                        // Clear old content
                        $("div#pic").empty();

                        var wordInfo = $.parseJSON(data);
                        $.each(wordInfo, function(i, value) {
                            var imgurl = value.imgurl;
                            var chaodai = value.chaodai;
                            var shujia  = value.shujia;
                            var beitie  = value.beitie;
                            var descStr = chaodai + " - " + shujia + " - " + beitie;
                            var imgstr = "<div class=\"img\">"+ 
                            "<a class=\"imglink\" target=\"_blank\" href=\"" + imgurl + "\">" +
                            "<img class=\"search_result\" src=\"" + imgurl + "\">" +
                            "</a>" +
                            "<div class=\"desc\">" + descStr + "</div>" +
                            "</div>";

                            // Show picture.
                            $("div#pic").append(imgstr);
                        });
                    });
                });

我已经在keypress函数里面加了alert，确认这个函数被调用了，但是搜索结果并没有显示出来，刷新后，第一次搜索时搜索结果会出现，但是瞬间消失。

测试页面在这里：http://shufazidian.sinaapp.com/

可以测试的汉字有：书之等等。

求解惑。

翰墨小生 | 初学一级 | 园豆：51
提问于：2014-09-29 11:09

< >

最佳答案

原因在于Enter键是表单的默认提交按键。你需要在表单form上加上onsubmit="return false;" 关闭这个默认快捷键。

收获园豆：10

幻天芒 | 高人七级 |园豆：37205 | 2014-09-29 11:25

多谢，专家六级果然不一样啊。

翰墨小生 | 园豆：51 (初学一级) | 2014-09-29 12:44

@zdd: :)..

幻天芒 | 园豆：37205 (高人七级) | 2014-09-29 13:09

其他回答(2)

function aaa(){
alert("调用方法");//把你的$("#searchbutton").click事件方法写这里面
}
$(document).keydown(function(event){//把这里改成你的按钮事件

if(event.keyCode == "13"){
aaa();//然后这里调用

}
});

试试看可以不

骑着蜗牛耍流氓 | 园豆：135 (初学一级) | 2014-09-29 11:30

将搜索按钮type 改成submit，<input type="submit" value="搜索" />

leerh | 园豆：207 (菜鸟二级) | 2014-09-29 11:32

清除回答草稿

您需要登录以后才能回答，未注册用户请先注册。

欢迎，请先 登录 或者 注册 。

Jquery textbox响应回车键

欢迎，请先登录或者注册。