2019-09-17 解决表单元素Enter事件强制刷新页面问题

解决表单元素Enter事件强制刷新页面问题

问题描述:给input或者select元素添加点击事件的时候,有可能会发生功能无法实现并且强制刷新页面的问题。

原因:使用了form标签,当其只有一个input或者select元素时候,按下回车会触发表单的提交事件,从而导致页面的刷新。

解决办法:

1.如果是原生的js,可以舍弃使用form标签,或者在form下面加一个隐藏的input (<input id='hiddeninput' type="hidden" style="display:none" />),也可以表单添加onsubmit 事件(<form method="post" οnsubmit="return false;"> )。

2.如果是在vue中,无论是elementUI框架还是iviewUI框架,都可以通过在表单标签的行内添加@submit.native.prevent来解决。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。