javascript - 使用 javascript 将文本框中的用户输入格式化为 HH :mm:ss

Question

我在仅使用 javascript(不使用 JQuery)格式化和验证时间字段 (asp:textbox) 时遇到问题。我希望用户在文本框中输入 6 个数字，如果它们有效，则插入冒号，但不允许用户输入无效数字。因此，如果插入的时间是 235959，无论是在离开字段后还是实时，请格式化为 23:59:59。或者如果输入的数字无效，比如输入 25 表示小时，用户甚至无法输入 25 中的 5。我根本没有真正处理过时间，而且真的很挣扎。

我必须承认，我认为这会更容易。我主要在网上搜索论坛，并且只能实现解决方案的一部分，就像我能够插入冒号，但也无法验证数字。示例:如果输入 24 作为小时，则更改为 00。我可以轻松地单独完成此操作，但我认为我很难让所有部分一起工作。希望我能充分解释自己。我还尝试了一系列 if 语句来验证时间，但这真的很困惑。

我在网上找到了这个冒号插入功能，但无法让它与数字验证一起使用。

更新1:刚刚尝试将 intFieldLength 嵌套在 intValidNum 中，因此如果前两个数字小于 24，则执行 intFieldLength，但这不起作用。还在努力!

更新2:为了便于阅读，删除了 intFieldLength var。添加了一些代码来尝试强制用户输入正确的小时，​​并且如果他们输入 24 作为小时，它将转换为 00。尝试执行类似于当前的分钟和秒的操作...

更新3:添加了一个切片来选择毫米和“< 60”条件。尝试添加“== 60”条件，以便如果 mm 为 60，则返回 00。

<asp:TextBox ID="txtEndTime" runat="server" MaxLength="8" placeholder="HH:MM:SS" onkeypress="formatTime(this)" />

---

function formatTime(timeInput) {

  intValidNum = timeInput.value;

  if (intValidNum < 24) {
    if (intValidNum.length == 2) {
      timeInput.value = timeInput.value + ":";
      return false;
    }
  }
  if (intValidNum == 24) {
    if (intValidNum.length == 2) {
      timeInput.value = timeInput.value.length - 2 + "0:";
      return false;
    }
  }
  if (intValidNum > 24) {
    if (intValidNum.length == 2) {
      timeInput.value = "";
      return false;
    }
  }

//Here is where I had trouble targeting the
//mm and ss in order to add conditions (see hh above).
//I used slice to assist me.
//Please let me know if any of you have suggestions/enhancements/corrections.

  if (intValidNum.length == 5 && intValidNum.slice(-2) < 60) {
    timeInput.value = timeInput.value + ":";
    return false;
  }
  if (intValidNum.length == 5 && intValidNum.slice(-2) > 60) {
    timeInput.value = timeInput.value.slice(0, 2) + ":";
    return false;
  }
  if (intValidNum.length == 5 && intValidNum.slice(-2) == 60) {
    timeInput.value = timeInput.value.slice(0, 2) + ":00:";
    return false;
  }


  if (intValidNum.length == 8 && intValidNum.slice(-2) > 60) {
    timeInput.value = timeInput.value.slice(0, 5) + ":";
    return false;
  }
  if (intValidNum.length == 8 && intValidNum.slice(-2) == 60) {
    timeInput.value = timeInput.value.slice(0, 5) + ":00";
    return false;
  }

} //end function

<input id="txtStartTime" type="text" placeholder="HH:MM:SS" onkeypress="formatTime(this)" MaxLength="8" />

Answer 1

看起来我回答了我的问题，但希望得到建议/更正/增强!

function formatTime(timeInput) {

  intValidNum = timeInput.value;

  if (intValidNum < 24 && intValidNum.length == 2) {
      timeInput.value = timeInput.value + ":";
      return false;  
  }
  if (intValidNum == 24 && intValidNum.length == 2) {
      timeInput.value = timeInput.value.length - 2 + "0:";
      return false;
  }
  if (intValidNum > 24 && intValidNum.length == 2) {
      timeInput.value = "";
      return false;
  }

  if (intValidNum.length == 5 && intValidNum.slice(-2) < 60) {
    timeInput.value = timeInput.value + ":";
    return false;
  }
  if (intValidNum.length == 5 && intValidNum.slice(-2) > 60) {
    timeInput.value = timeInput.value.slice(0, 2) + ":";
    return false;
  }
  if (intValidNum.length == 5 && intValidNum.slice(-2) == 60) {
    timeInput.value = timeInput.value.slice(0, 2) + ":00:";
    return false;
  }


  if (intValidNum.length == 8 && intValidNum.slice(-2) > 60) {
    timeInput.value = timeInput.value.slice(0, 5) + ":";
    return false;
  }
  if (intValidNum.length == 8 && intValidNum.slice(-2) == 60) {
    timeInput.value = timeInput.value.slice(0, 5) + ":00";
    return false;
  }



} //end function

<input id="txtStartTime" type="text" placeholder="HH:MM:SS" onkeypress="formatTime(this)" MaxLength="8" />