1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > 防止INPUT回车自动提交FORM表单

防止INPUT回车自动提交FORM表单

时间:2021-02-16 22:11:50

相关推荐

防止INPUT回车自动提交FORM表单

在做广菲克项目里的一个修改功能时,发现form表单里只有一个input时,按回车form就自动提交了。

form中的input只有一个,input获得焦点时按回车会form自动提交:

<!doctype html><html><head><meta charset="UTF-8"><title>test</title></head><body><form action="/gnail_oug" method="post"><!--input获得焦点后按回车form自动提交--><input type="text"></form></body></html>

有多个input时(不管是否是隐藏的),任意一个input获得焦点都不会提交。

<!doctype html><html><head><meta charset="UTF-8"><title>test</title></head><body><form action="/gnail_oug" method="post"><!--下面两个input获得焦点后按回车form都不会自动提交--><input type="text"><input type="text"></form></body></html>

<!doctype html><html><head><meta charset="UTF-8"><title>test</title></head><body><form action="/gnail_oug" method="post"><!--下面这个input获得焦点后按回车form不会自动提交--><input type="text"><!-- 这里是通过样式隐藏,不等于<input type="hidden"> ,使用type="hidden"同样会提交 --><input type="text" style="display: none;"></form></body></html>

单个input时,通过事件阻止form提交:

<!doctype html><html><head><meta charset="UTF-8"><title>test</title></head><body><form action="/gnail_oug" method="post"><!--下面两个input获得焦点后按回车form不会自动提交--><input type="text" onkeydown="if(event.keyCode==13)return false;"></form></body></html>

所以,为了防止INPUT按回车form自动提交,可以以下两种方法:

增加一个隐藏的input。为input增加一个按键事件来阻止form提交。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。