HTML文本框綁定按鈕按下事件

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

參考鏈接：

• button按鈕綁定回車鍵觸發事件的js及jQuery應用示例