form表单只有一个输入框,点击enter界面刷新

1,405 阅读1分钟

input输入框键盘事件按下回车键的时候,竟然刷新了整个页面,用户体验相当不好,原来是form表单提交
的时候会刷新页面解决方法如下:
方法一:
<form onsubmit="return false;">....</from>方法二:全局控制键盘按下事件,当键码值为13直接return false
document.onkeyup = function (e) {
    var e  = e || event
    var curryKey = e.which || e.keyCode || e.charCOde
    if (curryKey === 13) {
        return false
    } 
}
方法三 :
<input type="text" onKeyUp="return ClearSubmit(event)" />
function ClearSubmit (event) {
    if (e.keyCode == 13) return false
}
方法四:
如果一个 input 会自动提交,那么比较容易想到的是再加一个 input。
值得注意的是 这里的 input 不能设置 type 为 hidden,这样一样是不生效的,
form 一样会认为只有一个 input。需要设置成 
<input type="text" class="form-control" style="display:none">
方法五:@submit.native.prevent
<el-form-item prop="handleOpinion" :showMessage="true" label-width="0" @submit.native.prevent ></el-form>