今天收到一个任务，任务内容是这样：有一个搜索输入框，在搜索输入框内输入内容后，回车，发现页面自动刷新了，要求回车后进行搜索而不是刷新页面。开始以为是vue的问题，后来查了查原来是form表单的一种提交机制，解决办法有两种！
今天收到一个任务，任务内容是这样：有一个搜索输入框，在搜索输入框内输入内容后，回车，发现页面自动刷新了，要求回车后进行搜索而不是刷新页面。
开始以为是vue的问题，后来查了查原来是form表单的一种提交机制 : 当form表单中只有一个<input type="text" name='name' />时按回车键将会自动将表单提交。
浏览器自处理规则：
- 如果表单里有一个type=”submit”的按钮，回车键生效。
- 如果表单里只有一个type=”text”的input，不管按钮是什么type，回车键生效。
- 如果按钮不是用input，而是用button，并且没有加type，IE下默认为type=button，FX默认为type=submit。
- 其他表单元素如textarea、select不影响，radio checkbox不影响触发规则，但本身在FX下会响应回车键，在IE下不响应。
- type=”image”的input，效果等同于type=”submit”，不知道为什么会设计这样一种type，不推荐使用，应该用CSS添加背景图合适些。
防止回车自动提交的办法有三种：
-
在要提交的form 标签中加入 onsubmit=“return false;”
<form role="form" class="row-bottom" onsubmit="return false;"> </form> -
在表单内部多加一个隐藏的
<input />的标签。<form role="form" class="row-bottom"> <input type="hidden"/> <input name="name" value=""/> </form> -
给input标签添加事件 onkeydown=“if(event.keyCode==13){return false;}
<form role="form" class="row-bottom"> <input name="name" value="" onkeydown="if(event.keyCode==13){return false;}" /> </form>
Copyright © 2017 - 2025 boboidea.com All Rights Reserved 波波创意软件工作室 版权所有 【转载请注明出处】
