首页 新闻 赞助 找找看

Jquery textbox响应回车键

0
悬赏园豆: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
< >
分享
最佳答案
1

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

收获园豆:10
幻天芒 | 高人七级 |园豆:37175 | 2014-09-29 11:25

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

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

@zdd: :)..

幻天芒 | 园豆:37175 (高人七级) | 2014-09-29 13:09
其他回答(2)
0

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


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

}
});

试试看可以不

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

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

leerh | 园豆:207 (菜鸟二级) | 2014-09-29 11:32
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册