我需要一個輸入字段來設置持續時間。用戶可以在 中設置此持續時間minutes，hours或days例如，我想提供如下輸入的可能性：1m
8.5 h
3dETC我會將值轉換為分鐘數，然后將值發送到后端。你知道一些輸入插件有這個功能嗎？
4 回答
蕭十郎
TA貢獻1815條經驗 獲得超13個贊
使用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');
慕田峪4524236
TA貢獻1875條經驗 獲得超5個贊
因為我更喜歡純 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);
}
喵喵時光機
TA貢獻1846條經驗 獲得超7個贊
分配每個
<input>type="number"和min="0"。然后
max="23"持續幾個小時和max="59"幾分鐘。添加帶有屬性的隱藏輸入
name。如果您還沒有準備好，請將所有內容包裝在 a 中
<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>
拉風的咖菲貓
TA貢獻1995條經驗 獲得超2個贊
首先，您創建輸入
<input id="time" type="time">
最后，使用 javascript 將值添加到輸入中
document.getElementById("time").value = new Date().toTimeString().slice(0,8);- 4 回答
- 0 關注
- 219 瀏覽
添加回答
舉報
0/150
提交
取消