HTML5 <input type=“date”> - onChange 事件

Question

当用户使用 图形日历和箭头 或使用 键盘数字 时，是否可以检测到事件 onChange 为 <input type=“date”> ？

我只对 VanillaJS 解决方案感兴趣。

原文由 Piotr Białek 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

根据@neil-laslett 的回答，当他提到他们是否开始输入然后改变主意时，我稍微扩展了一下以“重新安装”更改事件……

所以流：

1. 如果存储的输入值与日期输入值不同，则创建操作以进行计算。
2. 绑定动作改变
3. 绑定到按键
   • 键入时，删除更改事件并绑定操作以模糊
   • 如果 keyCode=13（回车），触发动作
4. 绑定点击事件
5. 移除模糊和变化，重新添加变化事件

// assumptions: application.state.inputs is just a variable holding last known input values.
// dateChangeAsync: I needed to be async/await, but obviously just remove that if your action doesn't do anything asynchronous.
// name/input: Scoped variable holding appropriate references.  Could have used input.value instead of application.getInputValue(name) probably, but is part of a framework that supports all types of inputs.

const dateChangeAsync = async () => {
    // Since we might be triggered on a blur vs a change, a blur would happen every time
    // they 'tab' through an input or if they type a value and change it back to same
    // value before tabbing out (normal inputs automatically handle this and doesn't
    // trigger change event)
    if (application.state.inputs[name] != application.getInputValue(name)) {
        application.state.inputs[name] = application.getInputValue(name);
        await inputEventAsync(true);
    }
};

input.addEventListener("change", dateChangeAsync);

input.addEventListener("keypress", async e => {
    input.removeEventListener("change", dateChangeAsync);
    input.addEventListener("blur", dateChangeAsync);

    if (e.keyCode == 13) {
        await dateChangeAsync();
    }
});

input.addEventListener("click", e => {
    input.removeEventListener("blur", dateChangeAsync);
    input.removeEventListener("change", dateChangeAsync);
    input.addEventListener("change", dateChangeAsync);
});

原文由 Terry 发布，翻译遵循 CC BY-SA 4.0 许可协议