javascript - 输入更改事件不适用于 Stimulus 和 Vanilla JS

Question

我有一个带有 3 个输入的模态表单。前两个是小时，我需要在第一个更改时更新第二个小时的值。

我已成功将 Stimulus Controller 连接到表单，并且可以在控制台中显示它。
这是我的 Controller 代码:

import { Controller } from "stimulus"

export default class extends Controller {
  static targets = [ 'hour_start', 'hour_finish' ];

  connect() {
    console.log(this.hour_startTarget);
  }

  update() {
    alert('Changed');
  }
}

连接工作正常并在控制台上打印:

<input class="form-control string required form-control datetimepicker" data-target="dtpicker.hour_start" data-action="change->dtpicker#update" required="required" aria-required="true" type="text" name="order[hour_start]" id="order_hour_start">

但是当我改变这个输入的值时，警报没有弹出......

我还尝试忽略更改，因为它是输入的默认操作，但警报仍然没有出现。

并且还尝试在 js 上使用普通的事件监听器，如下所示:

const handleHourStart = () => {
  let hourStart = document.getElementById('order_hour_start'); 
  hourStart.addEventListener('change', () => {
    alert('Changed');
  })
}

但还是不行。奇怪的是，点击事件的行为符合我的预期，但变化并没有......

有任何想法吗？

Answer 1

我有一些类似的问题并通过使用 focusout 解决了它事件。它看起来像这样:

<input type="text"
       name="date" 
       class="datepicker form-control"
       data-target="timesmass.date"
       data-action="focusout->timesmass#updateSelection" >

当然，这只是一种解决方法。但也许它对你有用。