input里按回车键会刷新页面怎么办-一一网

表象：input里回车键会刷新页面
本质：触发了form表单的submit事件

两种情况：input输入框里按回车键触发submit

form表单里，有button，有input输入框，框内按回车会触发submit
form表单里，无button，但是只有一个input输入框，框内按回车会触发submit，(其他非input的表单元素可有可无)。

<!-- 情况1： -->
  <form action="">
    <!-- 有输入框就行，几个无所谓 -->
    <input type="text">
    <input type="text">
    <!-- 有没有其他非input输入框的元素都无所谓 -->
    <textarea name="" id="" cols="30" rows="10"></textarea>
    <button>sss</button>
  </form>

<!-- 情况2： -->
  <form action="">
    <!-- 只有一个输入框 -->
    <input type="text">
    <!-- 有没有其他非input输入框的元素都无所谓 -->
    <textarea name="" id="" cols="30" rows="10"></textarea>
  </form>
复制代码

解决方案1：去掉form标签

毕竟本质是触发了form的submit事件，那去掉肯定解决问题，但不一定适合去掉。

解决方案2：监听submit，阻止默认行为

监听submit，阻止默认行为

<form onsubmit="event.preventDefault()">
<!-- js也行 -->
<script>
  document.querySelector('form').addEventListener('submit',function(e){
    e.preventDefault()
  })
</script>
复制代码

解决方案3：input上监测回车事件

每个input里监听回车事件：

<input type="text" name="aa" onkeypress="if(event.keyCode == 13){event.preventDefault()}">

<!-- return false也行 -->
<!-- <input type="text" name="aa" onkeypress="if(event.keyCode == 13){return false}"> -->


<!-- js也行 -->
<script>
  document.querySelector('form input').addEventListener('keypress',function(e){
    if(event.keyCode == 13) {e.preventDefault()}
  })
</script>
复制代码

解决方案4：添加一个隐藏的input(无button的情况下)

在无button的情况下，增加一个隐藏的input

  <form action="">
    <!-- 只有一个输入框 -->
    <input type="text">
    <!-- 加个隐藏的 -->
    <input type="text" hidden>
    <!-- 有没有其他非input输入框的元素都无所谓 -->
    <textarea name="" id="" cols="30" rows="10"></textarea>
  </form>
复制代码