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

參考鏈接:

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章