一個為數字類型輸入動態生成 step 屬性的襯墊？

Question

我有一個number類型的輸入：

<input type="number">

沒有step屬性，但用戶可以開始輸入“21”、“1.12”、“0.00123”等數字，並且在 keydup 上，腳本將確定正確的step 。 例如，對於 21 來說，這將是 1，對於 1.12 來說，這將是 0.01，對於 0.00123 來說，這將是 0.00001，等等。

我試過這個：

 input.addEventListener('keyup', (e) => { const value = input.value; if (value.split('.').length === 1) { input.step = 1 return } let precision = value.split('.')[1].replace(/./g, '0') precision = `0.${precision.substring(0, precision.length - 1)}1` console.log(`precision: ${precision}`) input.step = precision })

 <input type="number" id="input">

它似乎工作，但我怎樣才能在一個襯里應用這個過程（在事件處理函數中）？

Answer 1

“單線”可能需要雙重調用來replace ：

 input.addEventListener('keyup', (e) => input.step = input.value.replace(/[^.]/g, "0").replace(/\d$/, "1") );

 <input type="number" id="input">

或者使用您使用的split ：

 input.addEventListener('keyup', (e) => input.step = +input.value % 1? "0." + "1".padStart(input.value.split(".")[1].length, "0"): 1 );

 <input type="number" id="input">

Answer 2

這應該可以解決問題：

 document.querySelector('input').addEventListener('keyup', (e) => { console.log(`precision: ${1 / Math.pow(10, input.value.split('.')[1]?.length?? 0)}`) })

 <input type="number" id="input">

Answer 3

不是oneliner - 但非常干凈易讀：

const fractionalPartLength = input.value.split('.')[1] && input.value.split('.')[1].length || 0
const precision = 10**(0-fractionalPartLength)

Answer 4

您可以通過僅使用兩個替換來優化和降低腳本的復雜性：

 input.addEventListener('keyup', (e) => { input.step = input.value.replace(/\d/g, '0').replace(/\d$/, '1'); });

 <input type="number" id="input">