首頁  >  文章  >  web前端  >  解析HTML頁面停用Enter鍵自動提交表單的方法詳解

解析HTML頁面停用Enter鍵自動提交表單的方法詳解

怪我咯
怪我咯原創
2017-04-30 10:29:352116瀏覽

下面小編就為大家帶來一篇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的多行輸入。

於是完整的程式碼如下:

#
<mce: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; } 
    } 
   } 
  }; 
  
// --></mce:script>

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

以上是解析HTML頁面停用Enter鍵自動提交表單的方法詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn