主页 / coding / 问题 / 78044305
Accepted
We5inelgr
Asked: 2024-02-23 06:27:29 +0800 CST

检测任何表单字段更改以更新日期更新字段

  • 772

我正在使用 Bootstrap Studio 5.3 创建一个页面，其中包含一个包含 22 个字段的表单。

其中一个字段是“更新日期”字段，每当其他字段之一（文本输入、选择下拉列表、复选框组、文本区域）发生更改时，我希望用当前日期和时间更新该字段。

目前，更新日期字段设置为页面加载时的日期和时间。

如何检测任何字段更改（更新日期字段除外），然后使更新日期字段随当前日期和时间更改？

场： 在此输入图像描述

它的属性： 在此输入图像描述

JS：

//Account for timezones and formate date as mm/dd/yyyy HH:MM AM/PM
function getFormattedDateTime(date) {
  const options = {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    hour12: false,
  };

  const formatter = new Intl.DateTimeFormat(undefined, options);
  const formattedDateTime = formatter.format(date);

  return formattedDateTime.replace(
    /(\d+)\/(\d+)\/(\d+), (\d+):(\d+)/,
    '$3-$1-$2T$4:$5'
  );
}

const date = new Date(Date.now());
const formattedDateTime = getFormattedDateTime(date);

document.querySelector('#date_started').value= formattedDateTime;
document.querySelector('#date_updated').value= formattedDateTime;

在这里发现了一些类似的东西检测表单的变化

但是，该解决方案仅适用于“提交”事件。

不知道如何将其转换为任何字段更改时，然后如何传递该事件...或者以某种方式触发上面现有的 JS 再次运行但只更新 #date_updated 字段。

javascript

1 个回答

  1. Best Answer

    如果您确实需要跟踪此类更改，我的第一个问题是为什么不在表单中以及您跟踪的每个输入change或input事件中选择所有所需的输入？例如：

    const form = document.getElementById("myForm")
form.querySelectorAll("input").forEach(input =>{ //instead of just input as selector, you can use any other selector e.g. input[type="text"] only or input:not([type="checkbox"])
  input.addEventListener("change", updateDateTime)
})

function updateDateTime(e){
  //your code here...
}

    您也可以考虑使用input事件而不是change您的电话。这对我来说似乎是可行的。22 个输入并不是跟踪性能所需的那么多输入。

    PS： 您还可以在这里查看这个答案：整个表单的更改

    选择适合您情况的最佳解决方案。

    • 1

相关问题