input[type=“date”] 的 onchange 事件不起作用-解网

问：

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

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

但是，由于多种原因，我需要侦听这些 onchange 事件来驱动诸如检查脏单元格之类的事情，因此我尝试将内联代码移动到 javascript 函数中，而不是在我的 js 文件中。一旦我感到满意，我就可以添加肮脏的检查等。但是，无论我尝试什么，我都无法让它在函数中工作。我读过一些帖子，这些帖子解释说 onchange 事件是针对文本字段量身定制的，因为它们适用于键控等。但我找不到有效的替代方案，无论是 oninput events、eventlistners、queryselectoralls 等。请帮助这个苦苦挣扎的新手！

下面是我的 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());
}

JavaScript jQuery 日期输入 onchange

你得到的确切错误是什么？设置工作的基础知识。您可以附加事件侦听器。但是，1.你在 JS 2 中错过了一个结束语。你有更多的内联 JS。这些事情中的任何一个都可能失败并阻止整个事情工作。目前尚不清楚这是否是您所经历的，即使它与此处提供的代码有关，实际问题是什么。编辑以添加最小可重现的示例)

1赞 Rory McCrossan 8/14/2023

如果你修复了 JS 中缺失的问题，那么代码就可以了：jsfiddle.net/oytn598w。我还注意到您正在使用自定义控件 - - 检查这是否仍然允许您使用本机事件。)this.showPicker

答：

0赞 twalow 8/15/2023 #1

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

// 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");
       });
    });
});

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

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

<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[type=“date”] 的 onchange 事件不起作用

onchange event for an input[type="date"] not working

评论

评论