持续时间超过 24 小时的 Jquery 输入掩码答案

【问题标题】：Jquery input mask for time duration exceeding 24 hrs持续时间超过 24 小时的 Jquery 输入掩码
【发布时间】：2019-08-18 04:51:08
【问题描述】：

我需要一个可以存储持续时间的输入掩码文本框。我尝试过使用 HH:MM:SS 但这会限制我只存储 23:59:59 并且不超过 24:00:00

我需要存储 7036:10:04 这是一个持续时间

我试过了

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script src="https://rawgit.com/RobinHerbots/jquery.inputmask/3.x/dist/jquery.inputmask.bundle.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
  
</head>
<body>
  <input type="text" id="endTime">
  <script>
    $(function(){
      
      $('input[id$="endTime"]').inputmask(
        "hh:mm:ss", {
        placeholder: "HH:MM:SS", 
        insertMode: false, 
        showMaskOnHover: false,
        //hourFormat: 12
      }
      );
      
      
    });
  </script>
</body>
</html>

【问题讨论】：

您可以指定自定义定义。
你能帮我写自定义定义吗
下面的答案对你有帮助吗？

标签： javascript jquery html jquery-inputmask input-mask

【解决方案1】：

如 cmets 中所示，您可以使用自定义定义，我已经定义了 5 分钟和秒的定义：

$(function() {
  $('input[id$="endTime"]').inputmask(
    "9999:59:59", {
      placeholder: "HHHH:MM:SS",
      insertMode: false,
      showMaskOnHover: false,
      //hourFormat: 12,
      definitions: {
        '5': {
          validator: "[0-5]",
          cardinality: 1
        }
      }
    }
  ).val('70361004');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://rawgit.com/RobinHerbots/jquery.inputmask/3.x/dist/jquery.inputmask.bundle.js"></script>
<input type="text" id="endTime">

【讨论】：

【解决方案2】：

这是你所期待的吗？在占位符部分提及您需要的位数（以小时为单位）。它适用于那么多数字。

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script src="https://rawgit.com/RobinHerbots/jquery.inputmask/3.x/dist/jquery.inputmask.bundle.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
  
</head>
<body>
  <input type="text" id="endTime">
  <script>
    $(function(){
      
      $("#endTime").inputmask(
        "9999:99:99", {
        placeholder: "HHHHH:MM:SS", 
        insertMode: false, 
        showMaskOnHover: false,
        //hourFormat: 12
      }
      ).val('7036:10:04');;
      
      
    });
  </script>
</body>
</html>

【讨论】：