Bootstrap Studio表单：检测字段变更自动更新Date Updated字段

核心思路 #

给表单内除#date_updated之外的所有可编辑字段绑定变更/输入事件，触发时调用统一的日期更新函数，将当前时间赋值给目标字段。

具体代码实现 #

// 获取日期更新字段
const dateUpdatedField = document.getElementById('date_updated');

// 定义更新日期的函数
function updateDateUpdated() {
  // 生成当前本地时间（格式可按需调整）
  const currentDateTime = new Date().toLocaleString();
  // 也可以用ISO标准格式：new Date().toISOString()
  dateUpdatedField.value = currentDateTime;
}

// 页面加载时初始化日期
window.addEventListener('DOMContentLoaded', updateDateUpdated);

// 选择所有需要监听的表单字段（排除日期更新字段本身）
const formFields = document.querySelectorAll('input:not(#date_updated), select, textarea, input[type="checkbox"]');

// 给每个字段绑定对应事件
formFields.forEach(field => {
  // 文本类字段用input事件（实时响应输入），选择/复选框用change事件
  const eventType = field.tagName === 'INPUT' && field.type !== 'checkbox' ? 'input' : 'change';
  field.addEventListener(eventType, updateDateUpdated);
});

关键说明 #

1. 字段选择器：input:not(#date_updated), select, textarea, input[type="checkbox"]确保只监听需要的字段，避免触发日期字段自身的更新循环。
2. 事件类型选择：文本输入框、文本域用input事件可以实时响应每一次输入；下拉选择框、复选框用change事件更贴合它们的交互逻辑。
3. 日期格式：toLocaleString()会生成符合本地习惯的日期时间格式，如果你需要自定义格式（比如YYYY-MM-DD HH:mm:ss），可以手动拼接日期参数：

   const now = new Date();
   const formattedDateTime = `${now.getFullYear()}-${(now.getMonth()+1).toString().padStart(2, '0')}-${now.getDate().toString().padStart(2, '0')} ${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}:${now.getSeconds().toString().padStart(2, '0')}`;
   

4. Bootstrap Studio中使用：把这段代码放到项目的「JavaScript」面板里，或者添加到页面底部的<script>标签中即可生效。

可选优化（防抖） #

如果担心用户快速输入导致频繁更新，可以给更新函数加防抖，减少不必要的触发：

function debounce(func, delay = 500) {
  let timeoutId;
  return (...args) => {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(this, args), delay);
  };
}

// 使用防抖后的更新函数
const debouncedUpdate = debounce(updateDateUpdated);

// 绑定事件时替换为防抖函数
formFields.forEach(field => {
  const eventType = field.tagName === 'INPUT' && field.type !== 'checkbox' ? 'input' : 'change';
  field.addEventListener(eventType, debouncedUpdate);
});

内容的提问来源于stack exchange，提问作者We5inelgr