Form表单Input中按enter键自动提交的问题

 From表单中只有一个input时，按回车键后表单自动提交(form表单的一个小坑)

按钮绑定回车事件后按回车表单执行js方法后表单自动提交刷新，先执行了js的方法后自动提交表单，使它相当于没有执行js方法，查阅资料得知在一个form表单中，若只有一个input，按回车键表单会自动提交，但是当表单中存在多个input时，按回车键不会执行任何操作，这是form表单的一个特性。

<form method="post" action="http:www.baidu.com">
        <input>
        <textarea name="text" cols="20" rows="5" />
  </form>

解决方案

1. 第一种方法，把表单去掉，这是最管用，但也是最傻的方法，直接添加onclick事件，不用表单提交，这种方法就不赘述了。

2. 第二种方法，很多人估计都想到过，就是既然一个input会自动提交，多个input就没问题，那么我给它多加一个input不就行了，有些人试过发现不行，那是为什么呢？
   因为他是这么写的<input type="hidden">，这样当然不行，一个隐藏域，type并不是text，所以不行。但是，<input type="text" style="display:none;">，使用这种方法就可以了，因为它是用样式隐藏输入框的，实质上还是一个type为text的input。

3.  

   第三种方法，这种方法很好用，直接对form进行操作，个人推荐这种方式。直接在form上加上onsubmit="return false;"这段话，它会阻止表单的回车键进行提交。
   例：<form action="" method="post" onsubmit="return false;">

4.  

   第四种方法，这种方法是直接对input进行操作，强行将回车键操作去掉，这种方式也不错，在input上加一个onkeydown事件，
   onkeydown="if(event.keyCode==13){return false;}"，阻止回车键的操作。
   例：<input type="text" onkeydown="if(event.keyCode==13){return false;}">

5. vue方案
   

   @submit.native.prevent
   
   .native 表示对一个组件绑定系统原生事件
   
   .prevent 表示提交以后不刷新页面