动态地将输入格式化为时钟时间

Question

我正在编写一个小型时钟应用程序，我想要一个干净的时间输入。我不想使用原生类型=＆＃34;时间＆＃34;元素因浏览器不一致而输入=＆＃34; number＆＃34;不允许冒号。所以我决定使用 type =＆＃34; text＆＃34; 并编写格式规则，将文本输入限制为有效的时钟时间。

它必须在用户输入时工作，并在他们去的时格式化它们的文本。我的规则有效，但是 if 和正则表达式的集群。我是新手，所以我假设我做了很多事情。您能想到更清洁或更有效的方法来实现相同的结果吗？

格式规则

• 必须只有[0-9]或＆＃34;：＆＃34;在输入中允许。
• 控制键必须仍然有效（Enter，Delete，Alt ...）
• 必须有一个＆＃34;：＆＃34;。
• 在＆＃34;之前：＆＃34;必须是一个或两个数字
• 以下必须正好是两位数。
• 最后两位数（分钟）必须小于60
• 对于24小时制，第一位数必须小于25
• 对于12小时制，第一个数字必须小于13 （global.dayNight）

小提琴

https://jsfiddle.net/x99btgez/

//虽然他们对格式化时钟时间有很多疑问，但我没有在Javascript中看到任何格式化用户类型的类型。

let ele = document.getElementById("wut");
let global = {};
global.dayNight = false; // 12 Hour or 24 Hour clock
document.getElementById("wut").addEventListener('keydown', filterTimeInput);
document.getElementById("wut").addEventListener('blur', cancel);

function submitInput() {
  if (!ele.value.match(/:/)) { // in the event they typed 3 numbers and left out the ":"
    ele.value =  ele.value.slice(0, -2) +":"+ ele.value.slice(-2)
  }
}

function cancel() {
  ele.value = "";
}

function filterTimeInput(evt) {

  let key; key = evt.key;

  if (key === "Enter") { submitInput(); }
  if (key === "Escape") { cancel(); }

  if (key.length === 1) { // Exclude non number characteres. I avoided a [^] match to leave operational keys enabled.
    if(key.match(/[A-Za-z\s\.\\\+\*\?\^\$\[\]\{\}\(\)\|\/\-&~!@#%`="><_',;]|Decimal|Multiply|Add|Divide|Subtract|Seperator/)) evt.preventDefault();
  }

  if (ele.value.match(/:/)) { // Prevents users from typing ":" twice, or from typing 3 digits of minutes
    if(key.match(/:/)) evt.preventDefault();
    if(ele.value.match(/:[0-9]{2}/)) {
      if(key.match(/[0-9]/)) evt.preventDefault();
    }
  }

  if (global.dayNight) { // 24 hour clock
    if (ele.value.length === 0) { // first number should be 1, 2 or counted as earlier than 10:00
      if (key.match(/[3-9]/)) {
        evt.preventDefault();
        ele.value = "0" + key + ":";
      } else if (key.match(/:/)) { // If they type a ":" first thing
        evt.preventDefault();
        ele.value = "00" + key;
      }
    } else if (ele.value.length === 1) { // If the first number was a 2, the second number should be less than 4
      if (ele.value === "2") {
        if (key.match(/[5-9]/)) {
          evt.preventDefault();
          ele.value += "0:" + key;
        }
      }
    }
  }

  else if (global.dayNight === false) { // 12 hour clock
    if (ele.value.length === 0) { // First number should be 0 or 1, or counted as earlier than 10:00
      if (key.match(/[2-9]/)) {
        evt.preventDefault();
        ele.value = "0" + key + ":";
      } else if (key.match(/:/)) { // If they type a ":" first thing
        evt.preventDefault();
        ele.value = "00" + key;
      }
    } else if (ele.value === "1") { // Second number following a 1 should less than 3 or treated as minutes
      if (key.match(/[3-9]/)) {
        evt.preventDefault();
        ele.value += "0:" + key;
      }
    }
  }

  if (ele.value.match(/:$/)) { // Prevents a number greater than 5 following a ":"
    if (key.match(/[6-9]/)) {
      evt.preventDefault();
      ele.value += "0" + key;
    }
  }

  if (ele.value.match(/[0-9]{3}/)) { // If a user types 4 numbers without a ":" then adds ":" for them.
    if (key.match(/[0-9]/)) {
      evt.preventDefault();
      ele.value = ele.value.slice(0,2) + ":" + ele.value.slice(2,3) + key
    }
  }
}