HTML页面禁用Enter键自动提交表单

本文介绍了一种在HTML页面中禁用Enter键提交表单的方法,通过监听键盘事件并根据不同浏览器特性调整行为,确保在IE、Firefox和Chrome等浏览器上都能有效阻止表单的默认提交。

在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的多行输入。

于是完整的代码如下:

[xhtml]  view plain  copy
  1. <mce:script language="javascript" type="text/javascript"><!--  
  2.     //禁用Enter键表单自动提交  
  3.         document.onkeydown = function(event) {  
  4.             var target, code, tag;  
  5.             if (!event) {  
  6.                 event = window.event; //针对ie浏览器  
  7.                 target = event.srcElement;  
  8.                 code = event.keyCode;  
  9.                 if (code == 13) {  
  10.                     tag = target.tagName;  
  11.                     if (tag == "TEXTAREA") { return true; }  
  12.                     else { return false; }  
  13.                 }  
  14.             }  
  15.             else {  
  16.                 target = event.target; //针对遵循w3c标准的浏览器,如Firefox  
  17.                 code = event.keyCode;  
  18.                 if (code == 13) {  
  19.                     tag = target.tagName;  
  20.                     if (tag == "INPUT") { return false; }  
  21.                     else { return true; }   
  22.                 }  
  23.             }  
  24.         };  
  25.       
  26. // --></mce:script>  
 
将上述的javascript代码应用于需要禁用Enter键自动提交表单的页面,经测试IE,Firefox和Chrome浏览器都完美解决Enter键自动提交表单问题。
### 禁用HTML表单中输入框的Enter提交功能 为了在HTML表单禁用输入框的Enter提交功能,可以通过监听盘事件(`keydown` 或 `keypress`)并阻止默认行为来实现。以下是具体的解决方案和代码示例: #### 1. 使用JavaScript监听盘事件 通过绑定全局或局部的 `onkeydown` 事件,可以检测用户是否按下了Enter码为13)。如果按下Enter且目标元素是输入框,则阻止默认的表单提交行为。 以下是一个完整的代码示例[^2]: ```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) { // 检测是否按下Enter tag = target.tagName; if (tag == "TEXTAREA") { return true; // 允许TEXTAREA中的Enter操作 } else { return false; // 禁止其他元素的Enter操作 } } } else { target = event.target; // 针对遵循W3C标准的浏览器 code = event.keyCode; if (code == 13) { // 检测是否按下Enter tag = target.tagName; if (tag == "INPUT") { return false; // 禁止INPUT中的Enter操作 } else { return true; // 允许其他元素的Enter操作 } } } }; ``` #### 2. 局部禁用特定输入框的Enter功能 如果只需要禁用特定输入框的Enter功能,可以将事件绑定到具体的输入框上,而不是全局绑定。例如: ```html <input type="text" id="myInput" /> <script> document.getElementById("myInput").onkeydown = function (event) { if (!event) event = window.event; if (event.keyCode === 13) { // 检测是否按下Enter return false; // 禁止Enter操作 } }; </script> ``` #### 3. 考虑不同浏览器的兼容性 不同的浏览器可能对事件处理有不同的实现方式。例如,在IE8中,点击表单内的某些元素(如表格单元格)可能会触发表单提交,而在Firefox中则不会[^1]。因此,建议使用上述代码中的兼容性处理逻辑,确保在主流浏览器中都能正常工作。 #### 4. 替代方案:使用Tab代替Enter 如果希望用户通过按下Tab跳转到下一个输入框,可以在禁用Enter的同时,确保Tab的功能不受影响。上述代码已经实现了这一点,因为只有当目标元素为输入框时才会阻止Enter的行为。 --- ### 注意事项 - 如果页面中有多个输入框,需要确保每个输入框的Enter行为都被正确处理。 - 在禁用Enter的同时,应避免影响其他盘事件的正常功能。 - 测试时需覆盖多种浏览器(如IE、Firefox、Chrome等),以确保兼容性[^3]。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值