输入[type =“date”]的onchange事件不起作用

Question

我对 javascript 和 MVC 世界相当陌生，所以请原谅这个可能很简单的问题。

我有一个日期类型输入表，用户需要为每个命名行选择日期。为了让用户直观地看到他们所做的更改，我创建了名为“visited”的类，它在单元格周围创建了边框。目前，输入有一个内联 onchange 事件，当用户更改其中一个日期时，该事件会添加此类。到目前为止一切都很完美。

但是，由于多种原因，我需要监听这些 onchange 事件来驱动诸如检查脏单元之类的事情，因此我尝试将内联代码移至 JavaScript 函数中，而不是移至我的 js 文件中。一旦我确信它的工作正常，我就可以添加脏检查等。但是，无论我尝试什么，我都无法让它在函数中工作。我读过一些帖子，解释了 onchange 事件是针对文本字段定制的，因为它们在键盘等上工作。但我找不到有效的替代方案，无论是 oninput 事件、事件列表器、查询选择器等。请帮助这个苦苦挣扎的新手！

下面是我的 HTML，其中保留了内联 onchange 函数；

<td><input class="dateTest" type="date" onchange="this.className=(this.value=='')?'':'visited';"  onclick="this.showPicker()" prevvalue="@dateString" value="@dateString" min="@previousString" max="@endString" /></td>

我最新的 javascript 尝试与附加值检查；

$(".dateTest").change(function (c) {
    var cell = $(this);
    cell.addClass("visited");
    console.log(cell.val());
}

Answer 1

我强烈建议不要使用内联事件。推理：内联事件不会堆叠并且会被覆盖。其他问题可能包括 CSP（内容安全策略）无法正常工作。

<table>
  <tr>
    <td><input class="tbl_inputs" type="text" value="Hello World"></td>
  </tr>
  <tr>
    <td><input class="tbl_inputs" type="text" value="Hello World"></td>
  </tr>
</table>

input.tbl_inputs.visited {
  background: #bbb;
}

.tbl_inputs {
  background: none;
  border: none;
}

// wait for html on page to load first before running JS
document.addEventListener('DOMContentLoaded', () => {
    // place all the inputs into an array
    const inputs = document.querySelectorAll(".tbl_inputs");
  // cycle each input and add an event listener "change"
  [...inputs].forEach(($input) => {
    // on change triggers when the value of the element changes AND the element is blurred.
    $input.addEventListener('change', (e) => {
        e.target.classList.add("visited");
    })
  })
});

示例：https://jsfiddle.net/sm2pcf56/