前端input标签自动响应回车进行跳转问题
记录一个前端标签的特性
接触这个特性的起因:
做的前端有个input搜索框,绑定了回车事件,如果能搜索出值的话,接着用这个回车功能搜索都是正常的。
但是,当我搜索的返回值是空的时候,这时候再用回车搜索会进行页面跳转。
控制台中会输出下面这一行,xxx是跳转的地址。
Navigated to xxx
因为我没有对input标签绑定过跳转事件,所以就很奇怪。
然后搜到了一个form表单的神奇特性:当这个form表单里的<input type="text" /> 标签有且只有一个的时候,回车会触发form的onsubmit方法。
例子如下,测试的时候注意把控制台的console的Preserve log功能选上,不然跳转的时候console.log()会被刷新
<!DOCTYPE html> <html> <head></head> </head> <body> <form onsubmit="checkForm()> <input type="text" /> </form> </body> <script type="text/javascript"> function checkForm(){ console.log("123"); } </script> </html>
解决的这个特性的办法:
方法一:把input标签的回车事件绑定的函数,函数结尾要return false;
方法二:在表单中再加一个<input type="text" style="display:none;"/>
个人小结:
前端的基础不够扎实,有些标签特性还不了解。只有多做多用才能遇到更多的特性。