Разное поведение в разных браузерах для события oninput во времени ввода

Question

Я пытаюсь применить какой-либо элемент управления к типу ввода 24-часового формата (минимальное и максимальное допустимое время и только 00 и 30 минут) с использованием события oninput. С Firefox это просто фантастика, потому что он применяет элементы управления только после окончания двух цифр для часов и минут, но в 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

В html5 элемент <input type="time"> имеет атрибут step, который должен делать именно то, что обсуждалось в этом посте. Шаг вводится в секундах, поэтому 30 минут - это 1800 секунд. К сожалению, не многие браузеры фактически выполняют округление ввода, как указано в этом атрибуте. Следующий «polyfill» заботится об этом недостатке: всякий раз, когда ввод был сделан, значение этого элемента округляется до ближайшего значения времени, удовлетворяющего атрибуту step. В моем примере я связываю действие с событием input элемента:

$('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>

Answer 2

Вы можете заменить начало вашей логики:

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'] ?>";
.....

Не совсем уверен, если это то, что вы спрашиваете, но скрипка поможет