记一次form表单只有一个input的坑

544 阅读1分钟

当页面里form 只有一个input的时候,按回车键回默认触发表单的提交操作从而刷新页面

image.png 解决方法之一就是在form上加上@submit.native.prevent阻止提交操作

以下是复制的


解决这个问题有四种方法,如下:

第一种方法,把表单去掉,这是最管用,但也是最傻的方法,直接添加onclick事件,不用表单提交,这种方法就不赘述了。

第二种方法,很多人估计都想到过,就是既然一个input会自动提交,多个input就没问题,那么我给它多加一个input不就行了,有些人试过发现不行,那是为什么呢?

因为他是这么写的<input type="hidden">,这样当然不行,一个隐藏域,type并不是text,所以不行。

但是,<input type="text" style="display: none;">,使用这种方法就可以了,因为它是用样式隐藏输入框的,实质上还是一个type为text的input。

第三种方法,这种方法很好用,直接对form进行操作,个人推荐这种方式。直接在form上加上οnsubmit="return false;"这段话,它会阻止表单的回车键进行提交。

例:<form action="" method="post" οnsubmit="return false;">

第四种方法,这种方法是直接对input进行操作,强行将回车键操作去掉,这种方式也不错,在input上加一个onkeydown事件,

οnkeydοwn="if(event.keyCode==13){return false;}",阻止回车键的操作。

例:<input type="text" οnkeydοwn="if(event.keyCode==13){return false;}">

以上四种方法都可以防止表单中只有一个input时,按回车键会自动提交表单的问题。


参考资料: https://blog.csdn.net/Stamina_Boy/article/details/81429151