1. 程式人生 > >HTML頁面禁用Enter鍵自動提交表單

HTML頁面禁用Enter鍵自動提交表單

在HTML頁裡面由於使用了form,常常需要禁用enter提交表單。因為內容頁或者母版頁自身有如果有type="submit"的button,當textbox聚焦時,按下enter都會觸發表單的預設提交(不論是IE還是firefox),於是需要在onkeydown中監聽使用者的按鍵。實際測試,IE8中導致表單提交的不確定因素太多,點選表單的table中的td都會觸發表單提交,而firefox則不會;於是在ie和ff中禁用表單提交需要不同的思路。

對於IE:

只有當事件源是TEXTAREA時才return true,允許預設動作;其他元素全部return false,禁止表單提交和任何響應。

對於firefox:

 只有當事件源是INPUT時才return false禁止表單預設動作;而其他元素則return true允許預設動作,比如textarea的多行輸入。

於是完整的程式碼如下:

<script language="javascript" type="text/javascript">
 //禁用Enter鍵表單自動提交
        document.onkeydown = function(event) {
            var target, code, tag;
            if (!event) {
                event = window.event; //針對ie瀏覽器
                target = event.srcElement;
                code = event.keyCode;
                if (code == 13) {
                    tag = target.tagName;
                    if (tag == "TEXTAREA") { return true; }
                    else { return false; }
                }
            }
            else {
                target = event.target; //針對遵循w3c標準的瀏覽器,如Firefox
                code = event.keyCode;
                if (code == 13) {
                    tag = target.tagName;
                    if (tag == "INPUT") { return false; }
                    else { return true; }
                }
            }
        };
</script>


將上述的javascript程式碼應用於需要禁用Enter鍵自動提交表單的頁面,經測試IE,Firefox和Chrome瀏覽器都完美解決Enter鍵自動提交表單問題。