本文轉載自微信公眾號「大遷世界」，轉載本文請聯系大遷世界公眾號。

input 標簽的 number 類型提供了一種處理數字的好方法。我們可以使用min和max屬性設置界限，并且可以通過向上和向下鍵來添加或減少1，如果設置step屬性，則向上或向下鍵來添加或減少對應的 step 值。但是，如果我們想讓用戶以不同的step上下移動，該怎么辦?

step不僅決定要添加或刪除的數量，還決定了該數字的限制位置。如果輸入的值為5，step 為10，然后按向上鍵，不會得到15(5 + 10)，而是10(最接近的 step倍數)。

那么，我們希望用戶可以輸入任何數字又想增加10，要怎么做?

如何增強 input type=number 體驗

先來定義一些按鍵操作。當用戶在 input 標簽中使用方向鍵時，有一些對應的快捷操作：

• 如果按的是向上或向下鍵盤，我們要對應的加減 1
• 如果按的是shift并按向上或向下鍵，我們要對應的加減 10
• 如果按的是alt并按向上或向下鍵，我們要對應的加減 0.1
• 如果按的是ctrl并按向上或向下鍵，我們要對應的加減 100, Mac 對應的 cmd 鍵
• 如果輸入內容為空，則根據 min 值來計算

實現

這是完整的代碼，它相對簡潔，僅約20行代碼。

const isMac = navigator.platform === 'MacIntel'; 
 
const KEY = { 
  UP: 38, 
  DOWN: 40, 
}; 
 
document.querySelector("input").addEventListener("keydown", e => { 
  if ([KEY.UP, KEY.DOWN].includes(e.keyCode)) { 
    e.preventDefault(); 
     
    const currentValue = isNaN(parseFloat(e.target.value)) 
      ? parseFloat(e.target.getAttribute("min")) || 0 
      : parseFloat(e.target.value); 
       
    const direction = e.keyCode === KEY.UP ? 1 : -1; 
     
    const modifier = (isMac ? e.metaKey : e.ctrlKey) ? 100 : e.shiftKey ? 10 : e.altKey ? 0.1 : 1; 
     
    const decimals = Math.max( 
      (currentValue.toString().split(".")[1] || "").length, 
      e.altKey ? 1 : 0 
    ); 
     
    const newValue = currentValue + direction * modifier; 
     
    e.target.value = newValue.toFixed(decimals); 
  } 
}); 

這段代碼有些部分可能不是很好看懂，我們來逐行看看，表示的含義。

const isMac = navigator.platform === 'MacIntel'; 
 
const KEY = { 
  UP: 38, 
  DOWN: 40, 
}; 

在 Windows 和 Linux 中，ctrl是我們想要使用的鍵，但在 Mac 上更常用的是cmd。isMac是一個布爾值，表示是 Mac 還是 Window 系統。

你在鍵盤上按下的每個鍵都有一個唯一的鍵碼。向上箭頭鍵是38向下箭頭鍵是40。因為我不喜歡代碼中的魔法數字，所以我們將它們存儲在一個對象中以便以后使用。

document.querySelector('input').addEventListener('keydown', e => { 
  ... 
} 

然后是監聽 input 的 keydown 事件。keydown 可以告訴我們按下哪個鍵以及按下哪個修飾鍵的事件。我們感興趣的修飾鍵是shift，alt，ctrl和cmd。metaKey 對應是 Mac 上是cmd鍵，在Windows中是 windows 鍵。

if ([KEY.UP, KEY.DOWN].includes(e.keyCode)) { 
  e.preventDefault(); 
  ... 
} 

如果用戶是向左或向右鍵，我們將不執行任何操作。我們在代碼周圍添加了一個if子句，以便僅在用戶按向上或向下鍵盤才執行。當用戶按向上或向下鍵時，我們調用e.preventDefault()。這樣可以防止輸入內容被更新，因為我們會自己做。

const currentValue = isNaN(parseFloat(e.target.value)) 
  ? parseFloat(e.target.getAttribute("min")) || 0 
  : parseFloat(e.target.value); 

你可能會認為獲取值與獲取e.target.value一樣容易，但是，我們必須做更多的工作。e.target.value始終是一個字符串，即使對于npmber類型的 input 元素也是如此，因此，要進行任何數學運算，我們都需要將其轉換為數字。因為我們需要能夠加/減0.1，所以我們需要使用浮點數而不是整數。

是，如果輸入為空，我們調用parseFloat，它返回的是一個NaN值。由于我們無法添加或減去NaN，因此我們需要對些時行判斷。如果輸入為空，那么我們將獲得最小值(如果存在)，或者默認為0。最小值也是一個字符串，因此我們也需要對其進行轉換。

如果min屬性未定義，它就變成NaN，而NaN || 0解析為0，所以得到結果是可以計算的。

const direction = e.keyCode === KEY.UP ? 1 : -1; 

從if子句中我們已經知道用戶按下的向上或向下的鍵，所以需要檢查用戶是按向上還是向下鍵盤，以便確定是否需要加或減。我們用變量 “direction” 來保存，如果是向上，值為1，向下則為 -1，之后可以將其與以后的值相乘。

const modifier = (isMac ? e.metaKey : e.ctrlKey) ?  
  100 :  
  e.shiftKey ?  
    10 :  
    e.altKey ?  
      0.1 :  
      1; 

我們找出按下了哪個修飾鍵。事件屬性可以告訴我們。如果在我們按下的是向上或向下鍵的同時還按下 shift 或 alt 鍵，則e.shiftKey，e.altKey的值為 true。

我們首先使用(isMac ? e.metaKey : e.ctrlKey)來檢查meta鍵或 ctrl鍵，具體取決于我們是否在 Mac上。如果是這樣，我們將相加或相減 100。如果改為按Shift鍵，則我們用10加或減，如果按Alt鍵，則加0.1。如果沒有按下這些鍵，則按“默認”行為加1或減1。

const decimals = Math.max( (currentValue.toString().split(".")1 || "").length, e.altKey ? 1 : 0 ); 

這里有點棘手，因為我們使用的是浮動。由于四舍五入的關系，JavaScript 中的浮點數可能會產生意想不到的結果。具體來說，如果你加上例如0.1``和0.2，你得到的值是0.30000000000000004，大約是0.3。

在進行基本計算時，0 的數量太多，但并不重要，在 input 元素中，0.30000000000000004看起來不是很好。我們只要 0.3。為了達到這個目的，我們需要知道在計算前的小數的最大數量是多少，就是當前輸入的小數的數量，或者是按下alt鍵時的1，兩者中哪個更大。我們存儲這個值以便以后使用。

const newValue = currentValue + direction * modifier; 

這是最終的結果值。我們知道當前值，要增加或減少的數量以及是否需要增加或減少。

我們將modifier(要添加的數量)與direction(即+1或-1)相乘，以便在將其添加到當前值時可以相加或相減。

現在我們已經計算了新值，但是由于前面提到的可能很奇怪的四舍五入，我們不能直接將它設置為新值作為輸入值，因為它可能有很多小數。相反，我們使用toFixed與我們之前找到的小數的數目

e.target.value = newValue.toFixed(decimals); 

這，就是所有的代碼。

這個input可以讓用戶快速增加或減少數值，或者精確地鎖定一個數字，這取決于用戶按的是哪個修改鍵。

原文：https://kilianvalkhof.com/2020/javascript/supercharging-input-type-number/