不同浏览器在输入类型时间中对 oninput 事件的不同行为

Question

我正在尝试使用 oninput 事件对 24 小时格式输入类型时间(允许的最小和最大时间，仅 00 和 30 分钟)应用一些控制。 使用 Firefox 非常棒，因为它仅在 2 位数字结束后应用控制数小时和分钟，但在 Chrome 中，一旦我输入第一个数字，就会触发事件，所以我无法插入任何东西，因为如果我想插入 15，它会开始控制 1。 其他人有类似的经验或知道如何进行类似的控制？ 下面是我正在使用的功能。谢谢

function timectrl() {
var mytime = document.getElementById("ora").value;
var sommaora = new Date();
var initialtime = "<?= $_POST['oraini'] ?>";
var finaltime = "<?= $_POST['orafine'] ?>";
mytime = mytime.split(":");
initialtime = orini.split(":");
finaltime = orfine.split(":");
sommaora.setHours(mytime[0],mytime[1]);
if ((mytime[1]>00) && (mytime[1]<=15))  
{
document.getElementById("ora").value=sommaora.getHours()+":00";
}
else if ((mytime[1]>15) && (mytime[1]<=30))  
{
document.getElementById("ora").value=sommaora.getHours()+":30";
}
else if ((mytime[1]>30) && (mytime[1]<=45))  
{
document.getElementById("ora").value=sommaora.getHours()+":30";
}
else if ((mytime[1]>45) && (mytime[1]<=60))  
{
document.getElementById("ora").value=sommaora.getHours()+":00";
}
if (mytime[0]<initialtime[0])  
{
document.getElementById("ora").value=initialtime[0]+":"+initialtime[1];
}
if (mytime[0]>finaltime[0])  
{
document.getElementById("ora").value=finaltime[0]+":"+finaltime[1];
}

}

Answer 1

您可以替换逻辑的开头：

function timectrl() {
var mytime = document.getElementById("ora").value;
var reduced = mytime.split(":").slice(0,2)
.reduce(function(ac,d,i){
return ac+= i ? +d : 60*(d%12)
},0);
if(
Math.max(0,Math.min(30,reduced)) !== reduced
){
return
}
var sommaora = new Date();
var initialtime = "<?= $_POST['oraini'] ?>";
var finaltime = "<?= $_POST['orafine'] ?>";
.....

不确定这是否是您要问的，但小提琴会有所帮助

Answer 2

在 html5 中，<input type="time">元素有一个属性step，它应该完全按照本文中讨论的内容执行。步长以秒为单位输入，因此 30 分钟是 1800 秒。不幸的是，实际上没有多少浏览器执行此属性指定的输入舍入。以下"polyfill"解决了这个缺点：每当输入时，该元素的值都会四舍五入到满足step属性的最接近的时间值。在我的示例中，我将操作绑定到元素的input-event：

$('input[type=time]').change(ev=>{var e=ev.target;
if(e.step){
var ti=e.value.split(':'),st=e.step/60,
mi=Math.round(ti[1]/st)*st,
ho=(ti[0]-0)+Math.floor(mi/60);
mi=mi%60;ho=ho%24;
e.value=('0'+ho).substr(-2)+':'+('0'+mi).substr(-2);
}});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="time">
<label>15 min. steps:
<input type="time" name="start" step="900"></label><br>
<label>30 min. steps:</label>
<input type="time" name="end" step="1800">
</form>