输入更改事件不适用于 Stimulus 或 Vanilla JS答案

【问题标题】：Input change event is not working with Stimulus nor Vanilla JS输入更改事件不适用于 Stimulus 或 Vanilla JS
【发布时间】：2020-10-01 14:01:53
【问题描述】：

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

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

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');
  })
}

但还是不行。奇怪的是，click 事件的行为与我预期的一样，但更改并没有......

有什么想法吗？

【问题讨论】：

你打电话给handleHourStart 吗？而且您的 data-action 属性中有一个 > 似乎弄乱了标签
是的，我在打电话。根据stimulus docs...，数据操作中的 -> 是 event->controller#action 的正确语法
当我使用 click->dtpicker#update 之类的点击事件时，它按预期工作......真正的问题是更改事件......
你解决了吗？ @JoãoRamires

标签： javascript ruby-on-rails stimulusjs

【解决方案1】：

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

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

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

【讨论】：