首页 > 代码库 > 禁止表单回车提交,但保留回车功能

禁止表单回车提交,但保留回车功能

话说楼主今天遇到一问题,问题大致如下:

在表单中回车不能提交表单,但是要响应换行请求。楼主翻遍度娘中帖子,无非都是些

onkeypress||onkeydown="if(event.keyCode == 13)return false;" 
// onkeypress="if(event.keyCode==13){event.keyCode=9;}";

测试了这两种东东,发现都没有通过我的Chrome,瞬时心情低落了许久,您可要明白这东东的上线日期就是下午呀,测试还在你屁股后面跟着,瞬间亚历山大。


翻来覆去,就想着还是自己去捉摸吧,最终就搞出了自己的解决方案,代码不多原理也很简单,哪来分享,有好方案的无序等待,即可拍砖,有需要的,下面点个小赞,楼主十分感谢呀!


示例代码:(没有应用方案的代码)

<form action="" method="post">
    <input type="text" name="username"/>
    <input type="submit" value="http://www.mamicode.com/go"/>
</form>

解决方案:


1.浏览器回车默认会调用表单中的submit按钮,第一步:干掉submit按钮,换成button

<form action="" method="post" id="demoForm">
    <input type="text" name="username"/>
    <input type="button" value="http://www.mamicode.com/go" id="submitBtn"/>
</form>


2.js动态控制提交,动态追加<submit>,然后js让submit click

$("#submitBtn").click(function(){
    var submitObj = $("<input type=‘submit‘ style=‘display:none;‘ id=‘realSubmitBtn‘/>");
    $("#demoForm").append(submitObj);
    $("#realSubmitBtn").click().remove();//点击后切记remove掉,省得表单验证没通过,导致加了好多
});


以上两步完美解决问题,话说楼主的解决方案复杂了一些,号外:

楼主为什么不直接让$("#submitBtn").click的时候直接调用$("#demoForm").submit(),很苦逼呀,因为用了kindEditor编辑器,如果不用表单的提交按钮提交,使用编辑器的textarea都么有值,所以楼主采用了这种方式!


希望对大家有帮助!


禁止表单回车提交,但保留回车功能