Form表单Input中按enter键自动提交的问题
From表单中只有一个input时,按回车键后表单自动提交(form表单的一个小坑)
按钮绑定回车事件后按回车表单执行js方法后表单自动提交刷新,先执行了js的方法后自动提交表单,使它相当于没有执行js方法,查阅资料得知在一个form表单中,若只有一个input,按回车键表单会自动提交,但是当表单中存在多个input时,按回车键不会执行任何操作,这是form表单的一个特性。
<form method="post" action="http:www.baidu.com">
<input>
<textarea name="text" cols="20" rows="5" />
</form>
解决方案
- 第一种方法,把表单去掉,这是最管用,但也是最傻的方法,直接添加
onclick
事件,不用表单提交,这种方法就不赘述了。 -
第二种方法,很多人估计都想到过,就是既然一个input会自动提交,多个input就没问题,那么我给它多加一个input不就行了,有些人试过发现不行,那是为什么呢?
因为他是这么写的<input type="hidden">,这样当然不行,一个隐藏域,type并不是text,所以不行。但是,<input type="text" style="display:none;">
,使用这种方法就可以了,因为它是用样式隐藏输入框的,实质上还是一个type为text的input
。 -
第三种方法,这种方法很好用,直接对form进行操作,个人推荐这种方式。直接在form上加上onsubmit="return false;"这段话,它会阻止表单的回车键进行提交。
例:<form action="" method="post" onsubmit="return false;"> -
第四种方法,这种方法是直接对input进行操作,强行将回车键操作去掉,这种方式也不错,在input上加一个onkeydown事件,
onkeydown="if(event.keyCode==13){return false;}",阻止回车键的操作。
例:<input type="text" onkeydown="if(event.keyCode==13){return false;}"> - vue方案
@submit.native.prevent .native 表示对一个组件绑定系统原生事件 .prevent 表示提交以后不刷新页面
本文作者:李云蹊
本文链接:https://www.cnblogs.com/liyunxi/p/18054422
版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步