Javascript timepicker.js-在某些情况下,时间选择器的位置错误
我正在使用timepicker.js库选择时间。单击输入时,时间选择器应显示在输入字段旁边。如果输入在文档的主视图中,它的工作方式与预期的一样。如果输入位置较低(我们需要滚动查看),然后单击它,则时间选择器在主视图页面中显示得更高 预期行为: 向下滚动后输入的行为: 在第二种情况下,我希望在输入字段旁边有一个时间选择器,就像第一种情况一样 index.html:Javascript timepicker.js-在某些情况下,时间选择器的位置错误,javascript,npm,time,timepicker,Javascript,Npm,Time,Timepicker,我正在使用timepicker.js库选择时间。单击输入时,时间选择器应显示在输入字段旁边。如果输入在文档的主视图中,它的工作方式与预期的一样。如果输入位置较低(我们需要滚动查看),然后单击它,则时间选择器在主视图页面中显示得更高 预期行为: 向下滚动后输入的行为: 在第二种情况下,我希望在输入字段旁边有一个时间选择器,就像第一种情况一样 index.html: <!DOCTYPE html> <html lang="en"> <head> &
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<input type="text" id="time1" placeholder="Time" />
<div style="height: 70rem;"></div>
<input type="text" id="time2" placeholder="Time" value="18:00" />
<div style="height: 70rem;"></div>
</body>
<link
href="//cdn.jsdelivr.net/timepicker.js/latest/timepicker.min.css"
rel="stylesheet"
/>
<script src="//cdn.jsdelivr.net/timepicker.js/latest/timepicker.min.js"></script>
<script src="./index.js"></script>
</html>
样式/css似乎将位置设置为绝对位置,而不是与文本框控件或区域相关的位置。我将加载F12开发工具并查看日期选择器周围的CSS,以查看是否有任何类或样式被覆盖,即位置值或顶部/底部等
var time1 = document.getElementById("time1");
var time2 = document.getElementById("time2");
var timepicker = new TimePicker(["time1", "time2"], {
lang: "en"
});
timepicker.on("change", function(evt) {
var value = (evt.hour || "00") + ":" + (evt.minute || "00");
evt.element.value = value;
});