css 时间点取完后,如何关闭时间录入?

c9qzyr3d  于 2023-01-18  发布在  其他
关注(0)|答案(2)|浏览(143)
<label class="form-label" for="taskTime">Enter Finish Time:</label>
<input class="form-control" type="time" id="taskTime" required />

选择时间后,时间选择器保持打开,选择时间后如何关闭它?

8fq7wneg

8fq7wneg1#

您可以在输入事件侦听器上添加**HTMLElement.blur()**方法,以删除输入字段上的焦点。

let taskTime = document.querySelector('#taskTime');
taskTime.addEventListener('input', (e) => {
  taskTime.blur();
});
<label class="form-label" for="taskTime">Enter Finish Time:</label>
<input class="form-control" type="time" id="taskTime" required />
iq3niunx

iq3niunx2#

首先,日期选择器会因操作系统和浏览器而不同。关闭时间选择器不是一个好的做法。
这将部分解决问题

let timePicker = document.getElementById("taskTime")

timePicker.addEventListener('input', updateValue);

function updateValue() {
  timePicker.type = 'text';
  timePicker.type = 'time';
}
<label class="form-label" for="time">Enter Finish Time:</label>
<input class="form-control" type="time" id="taskTime" required />

相关问题