HTML5:输入类型持续时间

2024-01-11

有没有办法使用输入类型持续时间。我正在尝试以某种方式进行输入,用户可以添加类似这样的持续时间06:30:27:15 ( hh:mm:ss:ms )并且应该只允许(0-23:0-59:0-59:0-59).

任何帮助表示赞赏!

NOTE!:我想在 Angular 2 中实现这个。


遗憾的是,HTML 输入和 JavaScript 本身都不支持持续时间数据类型。<input type="time">代表一天中的某个时间,并且可能会根据您的区域设置显示 AM/PM 选择器。

最好的选择是使用文本输入并使用 JavaScript 事件自动插入:并忽略无效的输入。使用模式属性也可能有所帮助。在从 JavaScript 方面使用该值之前,请务必将其转换为数字。这里有一些可以帮助您入门的东西。

{
  let durationIn = document.getElementById("duration-input");
  let resultP = document.getElementById("output");
  
  durationIn.addEventListener("change", function (e) {
    resultP.textContent = "";
    durationIn.checkValidity();
  });
  
  durationIn.addEventListener("invalid", function (e) {
    resultP.textContent = "Invalid input";
  });
}
input:invalid:not(:focus) { background: red; }
<input id="duration-input" type="text" required pattern="[0-9]{2}:[0-9]{2}:[0-9]{2}:[0-9]{2}" value="00:00:00:00" title="Write a duration in the format hh:mm:ss:ms">

<p id="output"></p>

我确信有许多开源库为此提供了现成的小部件。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

HTML5:输入类型持续时间 的相关文章

随机推荐

  • Python BeautifulSoup 相当于 lxml make_links_absolute

    所以lxml有一个非常方便的功能 make links absolute doc lxml html fromstring some html page doc make links absolute url for some html p
  • C# 事件继承

    我有这个程序 class One public delegate void del object o public event del SomethingChanged int x public int X get return x set
  • Delphi:泛型后代的泛型列表并以泛型作为参数

    我对泛型的理解以及它们如何使用和不可以使用有些困难 我有一个像这样的通用类 TControlMediator TControlMediator
  • 通过 fopen 使用代理服务器

    我正在尝试使用 fopen 从另一个网站读取远程文件 我想使用代理来执行此操作 据我所知我可以这样做 context stream context create array http gt array proxy gt tcp 192 16
  • 枕头安装PyPy3缺少zlib

    我当前正在尝试将 PIL 与 PyPy3 一起使用 但无论我如何尝试安装它 我都会收到错误 首先我尝试使用正常安装pypy3 pip install pillow 但出现我需要 zlib 的错误 因此 在寻找解决方案一段时间后 我发现了ea
  • 在python中,有什么方法可以在定义类后自动运行函数吗?

    我正在开发一个类 它需要的类级数据将相对复杂 为了节省打字并尽量减少错误 我想通过函数定义大部分数据 另外 我希望用户可以使用这些数据 即使他们还没有准备好实例化该类 那么 我想知道 有没有办法让这些函数在类定义后就自动运行呢 举个例子 我
  • 当虚拟机中的磁盘空间不足时如何创建天蓝色监视器警报

    我有一台虚拟机 现在我想如果我的磁盘空间显示非常低 我的意思是小于 2 GB 然后我想触发天蓝色监视器警报并希望收到有关此问题的电子邮件 azure Monitor 是否提供任何指标 目前还没有针对磁盘空间的预定义警报 但您可以使用自定义日
  • 使用 RCTAsyncLocalStorage + getAllKeys

    我正在尝试获取 iOS 本机代码上的 AsyncStorage 这是我的代码 void jsonFromLocalRNStrogeForKey NSString key completion void NSDictionary Nullab
  • 动画 UIScrollView contentInset 导致跳转卡顿

    我实现了一个自定义刷新控件 我自己的类 而不是子类 并且由于某种原因 自从迁移到 iOS 8 以来 设置滚动视图 特别是 UICollectionView 的 contentInset 来启动刷新动画会导致奇怪的跳跃 卡顿 这是我的代码 v
  • 自动删除MySQL中过期的数据行

    我已将一些奖金代码行添加到数据库中的奖金详细信息表中 所有奖金代码都有有效期 php是否可以自动删除已过期的行 我使用的代码是 有效期是日期 query select from bonusdetails where BonusType Ma
  • 更改 Fullcalendar 中过去事件的颜色

    我正在尝试实施这个解决方案 https stackoverflow com questions 4016044 adding a class to past events using fullcalendar with google cal
  • Yii ClistView 分页不起作用

    我的 Clistview 分页无法正常工作 我尝试了所有方法 但仍然没有成功 这是我的模型函数 public function getallone criteria new CDbCriteria criteria gt select t
  • 将 XML 转换为 Java 对象的最佳实践是什么?

    我需要将 XML 数据转换为 Java 对象 将此 XML 数据转换为对象的最佳实践是什么 想法是通过 Web 服务获取数据 它不使用 WSDL 仅使用 HTTP GET 查询 因此我无法使用任何框架 答案采用 XML 格式 处理这种情况的
  • 添加了 Lombok,但 Intellij IDEA 无法识别 getter 和 setter

    我在 ubuntu 上使用 IntelliJ IDEA 我添加了龙目岛 jar进入我的项目并安装 IDEA 的 Lombok 插件 我可以访问注释 但是getters and setters没有生成 如果我尝试访问不存在的 getter 或
  • 如何使soapUI 附件路径相对?

    我正在使用soapUI 来测试HTTP 服务器 我需要发送一个多部分 表单数据请求 当我通过文件选择器并附加它时 该请求工作正常 但它将路径保存为绝对路径 并且我需要保存相对于我的测试文件的路径 但没有缓存在我的测试文件中 我怎样才能做到这
  • UITableViewCell 与 UIImage,宽度未更新初始显示的单元格

    我想动态调整 UITableViewCell 内 UIImage 的宽度 我使用情节提要来设计 UITableViewCell 我刚刚添加了一个标签和一个图像 属性得到正确更新 我什至加载了将宽度放入标签以显示它是正确的值 对于图像 我正在
  • Hadoop MapReduce 与 MPI(与 Spark、Mahout 与 Mesos) - 何时使用其中之一?

    我是并行计算新手 刚刚开始在 Amazon AWS 上尝试 MPI 和 Hadoop MapReduce 但我对何时使用其中一种而不是另一种感到困惑 例如 我看到的一个常见的经验法则可以总结为 大数据 非迭代 容错 gt MapReduce
  • docker-machine 和 docker-compose 有什么区别?

    我想我不明白 首先 我创建了 docker machine docker machine create d virtualbox dev eval docker machine env dev 然后我编写了 Dockerfile 和 doc
  • MVC 区域 - 非区域路由解析为区域

    我已在我的 MVC 3 项目中添加了一个区域 我似乎无法在非常简单的场景中使用路由 看来总是想去区解决一下 这是我的配置 启动时 AreaRegistration RegisterAllAreas IgnoreRoute resource
  • HTML5:输入类型持续时间

    有没有办法使用输入类型持续时间 我正在尝试以某种方式进行输入 用户可以添加类似这样的持续时间06 30 27 15 hh mm ss ms 并且应该只允许 0 23 0 59 0 59 0 59 任何帮助表示赞赏 NOTE 我想在 Angu