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

Question

我有以下 StimulusJS controller that aims to track certain required elements (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();
        }
      })
    })
  }
}

Answer 1

从技术上讲，输入字段默认会有一个 value 空字符串 ("")

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

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

我的方法

在 input 事件上触发的每个 flatpickr HTML input element, connect a 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

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

In Javascript, how can I check that DOM elements input has changed without hardcoding and comparing values?

javascript

stimulusjs

我的方法