使用 JavaScript 使 HTML 數字輸入顯示 2 位小數

如果您使用的是 HTML 數字輸入字段（<input type="number"> ) 來收取美元金額，這裡有一個小技巧，可以使用 JavaScript 讓它始終顯示 2 位小數。

假設您有以下 HTML 編號 <input> 標籤：

<input type="number" id="price" min="0" max="10" step="0.01" value="0.00">

現在我們可以附加一個 change 監聽輸入變化的事件處理程序：

const input = document.querySelector('#price')
input.addEventListener('change', e => {
  // TODO: Format Number Here
})

在事件處理方法內部，我們可以使用 toFixed() 將輸入字符串四捨五入到指定小數位數的方法：

input.addEventListener('change', e => {
  e.currentTarget.value = parseFloat(e.currentTarget.value).toFixed(2)
})