HTML 输入字段可自动检索分钟、小时和天的粒度

Question

我需要一个输入字段来设置持续时间。

用户可以在 中设置此持续时间minutes，hours或days

例如，我想提供如下输入的可能性：

1m
8.5 h
3d

ETC

我会将值转换为分钟数，然后将值发送到后端。

你知道一些输入插件有这个功能吗？

Answer 1

使用moment.js您可以允许输入如下：const threeMinuts = '3m';       // 3 minutesconst eightHours  = '8.5 h';    // 8.5 hoursconst threeDays   = '3 days';      // 3 days然后，您必须将数值与测量单位分开：const numberValue = Number(input.match(/(\d|\.|,)+/)[0]);const unit = input.match(/[a-z]+/)[0];之后您可以将持续时间传递给时刻，如下所示：const duration = moment.duration(numberValue, unit);例如。：const duration = moment.duration(8.5, 'h');

Answer 2

因为我更喜欢纯 JS 并且没有库（开销很大），所以这里有一个简单的 JS 用于此任务适应（特别是正则表达式，例如数小时 (/([0-9]0-9?)[ ]?h/) 的数字） 随你便：function toSeconds(dd,hh,mm) { var d = parseInt(dd);  var h = parseInt(hh);  var m = parseInt(mm);  if (isNaN(d)) d = 0;  if (isNaN(h)) h = 0;  if (isNaN(m)) m = 0; var t = d * 24 * 60 * 60 +      h * 60 * 60 +      m * 60;  return t;}/* Expects 1d 11h 11m, or 1d 11h, or 11h 11m, or 11h, or 11m, or 1d returns number of seconds */function parseInput(sInput) {  if (sInput== null || sInput=== '') return 0;  var mrx = new RegExp(/([0-9][0-9]?)[ ]?m/);  var hrx = new RegExp(/([0-9][0-9]?)[ ]?h/);  var drx = new RegExp(/([0-9])[ ]?d/);  var days = 0;  var hours = 0;  var minutes = 0;  if (mrx.test(sInput)) {    minutes = mrx.exec(sInput)[1];  }  if (hrx.test(sInput)) {    hours = hrx.exec(sInput)[1];  }  if (drx.test(sInput)) {    days = drx.exec(sInput)[1];  }  return toSeconds(days, hours, minutes);}

Answer 3

分配每个<input>&nbsp;type="number"和min="0"。然后max="23"持续几个小时和max="59"几分钟。添加带有属性的隐藏输入name。如果您还没有准备好，请将所有内容包装在 a 中<form>并将其注册到"input"事件中。创建一个事件处理程序来提取和计算所有输入的值，然后将总计分配给隐藏输入。当<form>提交时，隐藏的输入值将被发送，因为它有一个name属性。顺便说一句，让用户在一个输入中输入如此多的值并不是真正好的用户体验。您应该为用户提供明确定义的字段，要求用户输入数据而不需要额外的复杂性。演示document.forms.duration.oninput = toMinutes;function toMinutes(e) {&nbsp; const dur = this.elements;&nbsp; let time;&nbsp; if (e.target.tagName === 'INPUT') {&nbsp; &nbsp; let d = Number(dur.days.value) * 1440;&nbsp; &nbsp; let h = Number(dur.hours.value) * 60;&nbsp; &nbsp; let m = Number(dur.minutes.value);&nbsp; &nbsp; time = d + h + m;&nbsp; &nbsp; dur.time.value = time;&nbsp; }&nbsp; console.log(dur.time.value);}:root,body {&nbsp; font: 400 3vw/1.45 Consolas}fieldset {&nbsp; width: max-content;}label,input {&nbsp; width: 6.5ch;&nbsp; display: inline-block;&nbsp; margin: 4px;}input {&nbsp; height: 3vw;&nbsp; line-height: 1;&nbsp; font: inherit;&nbsp; text-align: right}.as-console-wrapper {&nbsp; width: 40%;&nbsp; min-height: 100%;&nbsp; margin-left: 60%;}&nbsp;&nbsp;<form id='duration'>&nbsp; <fieldset>&nbsp; &nbsp; <legend>Duration</legend>&nbsp; &nbsp; <label for='days'>Days: </label>&nbsp; &nbsp; <input id='days' type='number' min='0' value='0'><br>&nbsp; &nbsp; <label for='hours'>Hours: </label>&nbsp; &nbsp; <input id='hours' type='number' min='0' max='23' value='0'><br>&nbsp; &nbsp; <label for='minutes'>Minutes: </label>&nbsp; &nbsp; <input id='minutes' type='number' min='0' max='59' value='0'><br>&nbsp; </fieldset>&nbsp; <input id='time' name='time' type='hidden'></form>

Answer 4

首先，您创建输入<input&nbsp;id="time"&nbsp;type="time">最后，使用 javascript 将值添加到输入中document.getElementById("time").value&nbsp;=&nbsp;new&nbsp;Date().toTimeString().slice(0,8);