网上搜了一下解决方案,其中有一个方案就是form标签上添加:
onkeydown="if(event.keyCode==13){return false;}"
嗯。。。确实管用,完全禁止了input回车提交表单。
但是。。。我想说其实input回车提交表单的用户体验真得很好呀,我就是想在提交时加一验证下而已,再找找原因吧:
- form中的input只有一个,input获得焦点时按回车会form自动提交。
- 有多个input时(不管是否是隐藏的),任意一个input获得焦点都不会提交。
多个input标签?程序员我是花重金聘请的,让他改HTML结构,估计不合适,js试一下吧:
export const Search = function(){
const doc = document;
const btn = doc.querySelector('.searchBtn');
if(!btn) return;
const form = btn.parentNode;
const input = form.getElementsByTagName('input')[0];
const placeholder = document.createElement('input');
placeholder.type = 'text';
placeholder.style.display = 'none';
form.appendChild(placeholder);
const submitFn = ()=>{
const value = input.value;
if(value.length <= 1) return;
form.submit();
}
btn.addEventListener('click',submitFn);
form.addEventListener('keypress',event=>{
if(event.keyCode==13 && (input == document.activeElement) ){
submitFn();
}
});
}
好用!!!