[ASP.net] 在textbox文字框輸入完文字按下Enter執行查詢動作

2017-09-26

5780
0
ASP.net MVC
2017-10-18

textbox enter key execute query

前言

如標題這樣的需求，如果表單使用傳統的post提交資料到後端、然後畫面刷新，應該不會有以下我遇到的問題
(因為預設文字框input text放在form元素裡，使用者在文字框輸入完文字按下Enter鍵的話，表單就提交出去了)

但由於我的表單查詢資料全部都是採用Ajax(畫面不會刷新)，而且我也從不指定form的action url(因為jQuery Ajax會另外再寫要呼叫的url)

這樣使用者照往常習慣在textbox輸入完文字按下Enter鍵，系統是不會去執行後端程式碼查詢資料(因為action url沒有指定)

如此就有以下的程式碼誕生出來解決此問題

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>測試網頁</title>
</head>
<body>
     
    <form name="myForm" >
        <input type="text" name="keyword" placeholder="請輸入..." />
        <input type="button" id="btnSearch" value="按我"  />
    </form>
    <!--引用jQuery-->
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.js"></script>
    <script type="text/javascript">

        $(function () {

            //在關鍵字textbox按下Enter，執行查詢
            $("input[name=keyword]").keyup(function (event) {
                if (event.keyCode === 13) {
                    $("#btnSearch").click();
                }
            });

            $("#btnSearch").click(function () {
                console.log("向後端API執行查詢"); 
            });
        });

  
    </script>
</body>
</html>

這段程式碼在Chrome下執行沒問題，在StackOverflow上很多也是這樣解法

但如果剛好遇到使用者使用IE瀏覽器而且他剛好又使用注音、倉頡輸入法(StackOverflow上的老外沒料到非英語系國家的輸入法情況吧XD)

以上代碼其實會做了兩次查詢

今天因為系統要為查詢動作寫Log才發現這種寫法怎麼IE會寫兩筆記錄到DB?

原來是注音、倉頡輸入法在打字時要先按一次Enter決定單字(此時Chrome不會觸發js事件，但IE會)，最後使用者再輸入鍵盤上的Enter鍵

才造成IE+注音、倉頡輸入法的使用者會執行了兩次查詢動作

實作

以後遇到有需要在文字框輸入完文字按下Enter鍵就執行查詢動作需求

改成以下代碼就好了(前提表單查詢是用Ajax來查詢資料)

 <script type="text/javascript">
$(function(){

 $("#btnSearch").click(function () {
      console.log("向後端API執行查詢"); 
  });


$("form[name=myForm]").submit(function (event) {
        $("#btnSearch").click();
        //取消表單提交動作，避免畫面刷新
        event.preventDefault();
    });


});


</script>

回首頁