input里按回车键会刷新页面 怎么办
表象：input里回车键会刷新页面
本质：触发了form表单的submit事件
两种情况：input输入框里按回车键触发submit
- form表单里，有button，有input输入框，框内按回车会触发submit
- form表单里，无button，但是只有一个input输入框，框内按回车会触发submit，(其他非input的表单元素可有可无)。
<!-- 情况1： --> <form action=""> <!-- 有输入框就行，几个无所谓 --> <input type="text"> <input type="text"> <!-- 有没有其他非input输入框的元素都无所谓 --> <textarea name="" id="" cols="30" rows="10"></textarea> <button>sss</button> </form> <!-- 情况2： --> <form action=""> <!-- 只有一个输入框 --> <input type="text"> <!-- 有没有其他非input输入框的元素都无所谓 --> <textarea name="" id="" cols="30" rows="10"></textarea> </form>
解决方案1：去掉form标签
毕竟本质是触发了form的submit事件，那去掉肯定解决问题，但不一定适合去掉。
解决方案2：监听submit，阻止默认行为
监听submit，阻止默认行为
<form onsubmit="event.preventDefault()"> <!-- js也行 --> <script> document.querySelector('form').addEventListener('submit',function(e){ e.preventDefault() }) </script>
解决方案3：input上监测回车事件
每个input里监听回车事件：
<input type="text" name="aa" onkeypress="if(event.keyCode == 13){event.preventDefault()}"> <!-- return false也行 --> <!-- <input type="text" name="aa" onkeypress="if(event.keyCode == 13){return false}"> --> <!-- js也行 --> <script> document.querySelector('form input').addEventListener('keypress',function(e){ if(event.keyCode == 13) {e.preventDefault()} }) </script>
解决方案4：添加一个隐藏的input(无button的情况下)
在无button的情况下，增加一个隐藏的input
<form action=""> <!-- 只有一个输入框 --> <input type="text"> <!-- 加个隐藏的 --> <input type="text" hidden> <!-- 有没有其他非input输入框的元素都无所谓 --> <textarea name="" id="" cols="30" rows="10"></textarea> </form>
element-ui会遇到同样的问题
el-form/el-input/el-button背后是原生的form/input/button，所以会同样遇到上述问题。
解决方法也类似：
- 去掉el-form表单
<el-form @submit.native.prevent>- 无button的情况下，增加 hidden类型的input
- 监听input的keypress，不过稍微复杂了点，不写了
