首页 > 代码库 > 禁止表单回车提交,但保留回车功能
禁止表单回车提交,但保留回车功能
话说楼主今天遇到一问题,问题大致如下:
在表单中回车不能提交表单,但是要响应换行请求。楼主翻遍度娘中帖子,无非都是些
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都么有值,所以楼主采用了这种方式!
希望对大家有帮助!
禁止表单回车提交,但保留回车功能
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。