前端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;"/>

 

个人小结:

  前端的基础不够扎实,有些标签特性还不了解。只有多做多用才能遇到更多的特性。

posted @ 2020-07-12 17:12  亮亮亮亮锦。  阅读(1383)  评论(0编辑  收藏  举报