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

Question

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

用户可以在 minutes、hours 或 days

中设置此持续时间

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

1m
8.5 h
3d

等等

我会将值转换为分钟前发送值到后端。

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

Answer 1

使用 moment.js 您可以允许如下输入：

const threeMinuts = '3m';       // 3 minutes
const eightHours  = '8.5 h';    // 8.5 hours
const 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

分配每个 <input> type="number" 和 min="0".
然后 max="23" 小时和 max="59" 分钟。
添加具有 name 属性的隐藏输入。
如果您还没有，请将所有内容包装在 <form> 中并将其注册到 "input" 事件。
创建一个事件处理程序来提取和计算所有输入的值，然后将总和分配给隐藏的输入。
提交 <form> 时，将发送隐藏的输入值，因为它具有 name 属性。

顺便说一句，让用户在一次输入中输入这么多值并不是很好的用户体验。您应该为用户提供明确定义的字段，要求用户输入数据而不需要额外的复杂性。

演示

document.forms.duration.oninput = toMinutes;

function toMinutes(e) {
  const dur = this.elements;
  let time;
  if (e.target.tagName === 'INPUT') {
    let d = Number(dur.days.value) * 1440;
    let h = Number(dur.hours.value) * 60;
    let m = Number(dur.minutes.value);
    time = d + h + m;
    dur.time.value = time;
  }
  console.log(dur.time.value);
}

:root,
body {
  font: 400 3vw/1.45 Consolas
}

fieldset {
  width: max-content;
}

label,
input {
  width: 6.5ch;
  display: inline-block;
  margin: 4px;
}

input {
  height: 3vw;
  line-height: 1;
  font: inherit;
  text-align: right
}

.as-console-wrapper {
  width: 40%;
  min-height: 100%;
  margin-left: 60%;
}

<form id='duration'>
  <fieldset>
    <legend>Duration</legend>
    <label for='days'>Days: </label>
    <input id='days' type='number' min='0' value='0'><br>
    <label for='hours'>Hours: </label>
    <input id='hours' type='number' min='0' max='23' value='0'><br>
    <label for='minutes'>Minutes: </label>
    <input id='minutes' type='number' min='0' max='59' value='0'><br>
  </fieldset>
  <input id='time' name='time' type='hidden'>
</form>

Answer 3

因为我更喜欢纯 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 4

首先，您创建输入

<input id="time" type="time">

最后，您使用 javascript

将值添加到输入中

document.getElementById("time").value = new Date().toTimeString().slice(0,8);

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

HTML input field with automatically retrieving the granularity from minutes, hours and days

html

javascript

css

jquery

input-field

演示