在 Javascript 中，如何在不进行硬编码和比较值的情况下检查 DOM 元素输入是否已更改？ 我的方法

问题描述

我有以下 StimulusJS 控制器，旨在跟踪某些 required 元素（flatckpickr 日期选择器）。

选择所有日期选择器的日期后，我必须启用表单中的提交按钮。

我在跟踪用户已输入所有必需的输入时遇到问题，并且由于这应该是一个可重复使用的控制器，我无法对值进行硬编码并与它进行比较。 >

检查所有 requiredTargets 是否已收到用户输入的有效方法是什么？

import { Controller } from 'stimulus';

export default class extends Controller {
  static targets = ["required","deactivable"];

  toggle(){
    this.deactivableTargets.toggleAttribute("disabled");
  }

  connect() {
    
    this.requiredTargets.forEach((element) => {

      element.addEventListener('input',(event) => {

        console.log(`${element} changed`);

        //if (this.requiredTargets.inputed?) {
          toggle();
        }
      })
    })
  }
}

解决方法

从技术上讲，默认情况下，输入字段的 value 将为空字符串 ("")

您可以使用 JavaScript Array.every 方法检查所有必填字段是否已填写且不等于空字符串。

这将返回 true 或 false，根据具体情况，您可以调用 toggle() 方法

我的方法

在每个 flatpickr HTML input 元素上，连接一个在 input 事件上触发的 Stimulus action 方法。

在这种情况下我们称它为 handleInput，所以我们的 HTML 应该是这样的

<input
  data-<controller-name>-target="required"
  data-action="<controller-name>#handleInput"
  type="text"
  placeholder="Select Date.."
  data-input
>
<!-- replace <controller-name> with the actual stimulus controller name -->

接下来，像这样在控制器中定义 handleInput 方法

handleInput() {
  const isRequiredFilled = this.requiredTargets.every(el => el.value !== '');

  if (isRequiredFilled) {
    this.toggle();
  }
}

注意：输入元素有一个默认的输入事件，所以你不必自己处理。请参阅documentation