在 Android Chrome 上,时间选择器可能无法正常提交其选定值。原因是该选择器是通过 HTML5 中的 input type="time"
实现的,默认情况下无法提交。为了解决这个问题,可以使用 JavaScript 获取所选的时间值,并将其手动添加到表单数据中。以下是一个示例代码:
HTML 代码:
JavaScript 代码:
const form = document.querySelector("form");
const timePicker = document.querySelector("#timePicker");
form.addEventListener("submit", (event) => {
event.preventDefault(); // 防止表单默认提交
const timeValue = timePicker.value;
if (!timeValue) {
// 如果未选择时间,则不做任何操作
return;
}
// 将所选时间值添加到表单数据
const formData = new FormData(form);
formData.set("timePicker", timeValue);
// 发送表单数据
fetch(form.action, {
method: form.method,
body: formData,
})
.then((response) => {
// 处理响应
})
.catch((error) => {
console.error(error);
});
});
在上面的示例代码中,我们监听表单的 submit
事件,并在事件回调函数中获取所选的时间值,并使用 FormData
对象将其添加到表单数据中。然后,我们使用 fetch
函数将表单数据发送到服务器。