我需要一個(gè)輸入字段來設(shè)置持續(xù)時(shí)間。用戶可以在 中設(shè)置此持續(xù)時(shí)間minutes，hours或days例如，我想提供如下輸入的可能性：1m
8.5 h
3dETC我會(huì)將值轉(zhuǎn)換為分鐘數(shù)，然后將值發(fā)送到后端。你知道一些輸入插件有這個(gè)功能嗎？
4 回答
蕭十郎
TA貢獻(xiàn)1815條經(jīng)驗(yàn) 獲得超13個(gè)贊
使用moment.js您可以允許輸入如下：
const threeMinuts = '3m';? ? ? ?// 3 minutes
const eightHours? = '8.5 h';? ? // 8.5 hours
const threeDays? ?= '3 days';? ? ? // 3 days
然后，您必須將數(shù)值與測(cè)量單位分開：
const numberValue = Number(input.match(/(\d|\.|,)+/)[0]);
const unit = input.match(/[a-z]+/)[0];
之后您可以將持續(xù)時(shí)間傳遞給時(shí)刻，如下所示：
const duration = moment.duration(numberValue, unit);
例如。：
const duration = moment.duration(8.5, 'h');
慕田峪4524236
TA貢獻(xiàn)1875條經(jīng)驗(yàn) 獲得超5個(gè)贊
因?yàn)槲腋矚g純 JS 并且沒有庫（開銷很大），所以這里有一個(gè)簡(jiǎn)單的 JS 用于此任務(wù)適應(yīng)（特別是正則表達(dá)式，例如數(shù)小時(shí) (/([0-9]0-9?)[ ]?h/) 的數(shù)字） 隨你便：
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);
}
喵喵時(shí)光機(jī)
TA貢獻(xiàn)1846條經(jīng)驗(yàn) 獲得超7個(gè)贊
分配每個(gè)
<input>type="number"和min="0"。然后
max="23"持續(xù)幾個(gè)小時(shí)和max="59"幾分鐘。添加帶有屬性的隱藏輸入
name。如果您還沒有準(zhǔn)備好，請(qǐng)將所有內(nèi)容包裝在 a 中
<form>并將其注冊(cè)到"input"事件中。創(chuàng)建一個(gè)事件處理程序來提取和計(jì)算所有輸入的值，然后將總計(jì)分配給隱藏輸入。
當(dāng)
<form>提交時(shí)，隱藏的輸入值將被發(fā)送，因?yàn)樗幸粋€(gè)name屬性。
順便說一句，讓用戶在一個(gè)輸入中輸入如此多的值并不是真正好的用戶體驗(yàn)。您應(yīng)該為用戶提供明確定義的字段，要求用戶輸入數(shù)據(jù)而不需要額外的復(fù)雜性。
演示
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>
拉風(fēng)的咖菲貓
TA貢獻(xiàn)1995條經(jīng)驗(yàn) 獲得超2個(gè)贊
首先，您創(chuàng)建輸入
<input id="time" type="time">
最后，使用 javascript 將值添加到輸入中
document.getElementById("time").value = new Date().toTimeString().slice(0,8);- 4 回答
- 0 關(guān)注
- 238 瀏覽
添加回答
舉報(bào)
0/150
提交
取消