js表单事件详细汇总

2023年6月10日下午8:20 • JavaScript

关于“js表单事件详细汇总”的完整攻略，我将分为五部分进行讲解。

第一部分：什么是表单事件

表单事件是在用户与表单交互时触发的JavaScript方法。表单事件绑定在表单元素上，例如input、button、form等。

第二部分：表单事件的使用方法

表单事件可以通过addEventListener()或on事件属性来绑定。addEventListener()是一个非常常用的方法，它可以让你在需要绑定事件的元素上注册一个或多个事件监听器，并在元素接收事件时调用这些监听器。

下面是一个简单的示例，用addEventListener()方法为input元素绑定onchange事件：

let input = document.getElementById("myInput");
input.addEventListener("change", function() {
  console.log("Text input has been changed!");
});

第三部分：表单事件的种类和介绍

下面是常用的表单事件种类及其说明：

1. onchange

当表单元素的值在失去焦点时改变时触发该事件。

2. onsubmit

当用户提交表单时触发该事件。

3. onreset

当用户重置表单时触发该事件。

4. onfocus

当表单元素获得焦点时触发该事件。

5. onblur

当表单元素失去焦点时触发该事件。

第四部分：表单事件的应用场景

表单事件可以用于很多场景，例如：

1. 表单验证

表单事件可以用于表单验证，例如需要用户填写电话号码时，可以在提交表单前验证表单元素是否为电话号码格式。

<form>
  <label for="phone">请输入手机号码</label>
  <input type="tel" id="phone" name="phone" required
         minlength="11" maxlength="11" size="11"
         pattern="[0-9]{11}">
  <button type="submit">提交</button>
</form>

<script>
  let phone = document.getElementById("phone");
  phone.addEventListener("input", function(event) {
    if (phone.validity.patternMismatch) {
      phone.setCustomValidity("请输入正确的手机号码！");
    } else {
      phone.setCustomValidity("");
    }
  });
</script>

2. 动态调整表单元素的状态

表单事件可以用于动态调整表单元素的状态，例如需要用户选择日期时，可以根据用户选择的日期动态调整其他表单元素的状态。

<form>
  <label for="start">请选择开始日期:</label>
  <input type="date" id="start" name="start"
         value="2022-01-01" min="2022-01-01" max="2022-12-31">
  <br><br>
  <label for="end">请选择结束日期:</label>
  <input type="date" id="end" name="end" min="2022-01-01"
         value="2022-01-01" max="2022-12-31" disabled>
  <br><br>
  <button type="submit">提交</button>
</form>

<script>
  let start = document.getElementById("start");
  let end = document.getElementById("end");

  start.addEventListener("input", function(event) {
    end.min = start.value;

    if (end.value < end.min) {
      end.value = end.min;
    }

    end.disabled = false;
  });
</script>