如何准确统计表单中已填写的“Calctime”类输入框数量-html教程-PHP中文网

如何准确统计表单中已填写的“Calctime”类输入框数量

本文介绍如何通过 JavaScript 动态统计具有特定 CSS 类（如 .calctime）且非空的字段数量，并实时更新表单中的“# of Sectors”字段，适用于多段航班时间录入等场景。

本文介绍如何通过 javascript 动态统计具有特定 css 类（如 `.calctime`）且非空的 `` 字段数量，并实时更新表单中的“# of sectors”字段，适用于多段航班时间录入等场景。

在开发航空业务类表单（如机场间航段时间记录系统）时，常需支持最多 8 个“Sector”（航段）的灵活录入。每个航段对应一个 Block Time 输入框，统一赋予 CSS 类名 calctime。提交前，需自动计算并显示用户实际填写的航段数（即非空的 .calctime 字段数量），而非固定总数 8。

原始代码的问题在于仅获取了元素集合长度，未校验值是否有效：

function sectors() {
  const items = [...document.querySelectorAll('.calctime')];
  document.getElementById('sector').value = items.length; // ❌ 始终返回 8
}

正确做法是遍历所有匹配元素，逐个检查其 value 属性是否为非空字符串（注意：value 为空字符串 ""、null 或 undefined 均视为未填写；而 " "（含空格）会被视为已填写，需按需处理）：

function sectors() {
  const items = [...document.querySelectorAll('.calctime')];
  let filledFields = 0;

  items.forEach(item => {
    if (item.value.trim() !== '') { // ✅ 使用 trim() 过滤纯空白字符
      filledFields++;
    }
  });

  document.getElementById('sector').value = filledFields;
}

✅ 关键优化说明：

使用 item.value.trim() !== '' 替代简单的 if (item.value)，可避免用户误输空格导致计数错误；
采用扩展运算符 [...nodeList] 将 NodeList 转为数组，确保 forEach 可用（兼容现代浏览器）；
推荐将该函数绑定到输入事件，实现动态响应（如用户每输入/清空一个字段即刷新计数）：

// 页面加载完成后，为所有 .calctime 字段添加实时监听
document.addEventListener('DOMContentLoaded', () => {
  const calctimeInputs = document.querySelectorAll('.calctime');
  calctimeInputs.forEach(input => {
    input.addEventListener('input', sectors);
  });
});

⚠️ 注意事项：