HTML文本框绑定按钮按下事件

2021-02-13脚本开发发消息

HTML文本框绑定按钮按下事件 1、说明

在表单中，文本框内容编辑完成后按下回车可以提交，如果不在表单中，则需要添加绑定事件才能实现类似功能。

2、示例

示例使用了一个文本框和一个按钮标签，编辑文本框时按下回车可以调用按钮按下事件。

HTML代码，两个标签：

div class="input-group"
    input id="tbxSearch" type="text" class="form-control" placeholder="关键词"
    button id="btnSearch" class="btn btn-primary" type="button"
        查找
    /button
/div

JQuery示例代码：

//查找按钮按下事件绑定
$('#btnSearch').on('click',function(){
    //获取关键词并查询
    window.location.href='/record?key_word='+$('#tbxSearch').val();
});

//将输入框回车事件绑定至查找按钮按下
$('#tbxSearch').on('keypress',function(e){
    if (event.keyCode == 13) {
    event.cancelBubble = true;
    event.returnValue = false;
    $(this).parents("div").find("#btnSearch").click();
  }
});