久久无码中文字幕_日韩精品无码一本二本三_久久精品呦女暗网_欧美一级夜夜爽_久久精品国产99久久99久久久

21
2024/06

阻止From表單enter提交

發(fā)布時間:2024-06-21 14:01:59
發(fā)布者:dzw
瀏覽量:
0

        大家看一下一段代碼:

阻止From表單enter提交

        阻止From表單enter提交

        我只為按鈕設(shè)置了一個點擊事件的情況下,只有點擊按鈕本身才會請求接口并替換數(shù)據(jù),但是在實際測試中發(fā)現(xiàn),對input按下回車鍵也會觸發(fā)該接口,起初以為是事件冒泡,但由于是同級,且經(jīng)過測試依然會生效。最后在大佬的點撥下知道了這是from表單的自動提交。

        在Form表單中input會義自動響應(yīng)回車事件。這是表單的默認(rèn)提交動作。表單的提交行為,可以用兩種方式定,一是form表單自身,二是form表單的button元素(包括type='submit’的input標(biāo)簽,以及type=‘submit’的button元素,button元素type為Submit)。當(dāng)用戶在一個表單的input標(biāo)簽按enter按鈕時,瀏覽器會找到表單中的第一個提交按鈕(submit button),并觸發(fā)click,同時提交表單。

        而本段代碼中我的第一個按鈕就是提交按鈕,便會觸發(fā)查詢。

        解決方法有兩種:

        1.在from標(biāo)簽中添加以下代碼,判斷在表單內(nèi)按下回車,就會return函數(shù),強制停止

         onkeydown="if(event.keyCode==13){return false;}"

        2.也可以使用jq,該方法抓取了頁面內(nèi)所有的from,并在按下回車鍵時阻止默認(rèn)提交

        $('form').on('keypress', function(event) {
            // 判斷按下的鍵是否是回車鍵
            if(event.which === 13) {
              // 阻止默認(rèn)行為
              event.preventDefault();
            }
          });

        更多jq知識點擊這里


關(guān)鍵詞:
返回列表