input输入框按回车键提交表单问题

    今天发现一个奇怪的问题,当页面只有一个input文本框(type="text")时,将鼠标焦点置于这个文本框,然后按回车键(enter键)时会提交表单数据。查了一下,原来这是浏览器的默认行为,当form中只有一个input文本框(type="text")时,用户按回车键会提交这个form表单。从这句话中我们就可以得到产生这种行为的条件就是(1)form中只有一个文本框。(2)用户在文本框中按回车键。
    下面就很清楚了,要解决这个问题,要么不满足第一个条件,即让form中有多个文本框,要么不满足第二个条件,即禁用回车键。解决方案如下:

1、保证form表单中不止一个文本框(建议使用优先级:高)
那么我们就可以给form表单中再加入一个文本框,当然由于加的这个文本框只是一个标识,所以我们需要把它隐藏,即

<input type="text" id="hiddenText" name="hiddenText" style="display:none" />

2、保证用户在这个文本框中按回车键不起作用
那么就有2种方式
(1)禁用页面的回车键功能(建议使用优先级:低)

document.onkeydown = function(e) {
    var e = e || event;
    if(e.keyCode == 13) {
        return false;
    }
}

    但是这种方式会导致整个页面都不能使用回车键(可能其他地方需要用到回车键),那么此时就可以使用下面的方式了。
(2)单独禁用那一个文本框的回车键功能(建议使用优先级:中)

<input type="text" id="test" name="test" onkeydown="return disableTextSubmit(event)" />
function disableTextSubmit(e) {
    if (e.keyCode == 13) {
        return false;
    }
}

总结:
    要解决一个文本框按回车键提交表单的问题,要么使用方案1,或者使用方案2的第二种方法,如果情况允许也可以使用方案2的第一种方法。当然可能还有其他的解决方案,只要能解决问题,都可以使用。

  • 4
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值