本文轉(zhuǎn)載自微信公眾號(hào)「大遷世界」，轉(zhuǎn)載本文請(qǐng)聯(lián)系大遷世界公眾號(hào)。

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

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

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

如何增強(qiáng) input type=number 體驗(yàn)

先來(lái)定義一些按鍵操作。當(dāng)用戶在 input 標(biāo)簽中使用方向鍵時(shí)，有一些對(duì)應(yīng)的快捷操作：

• 如果按的是向上或向下鍵盤，我們要對(duì)應(yīng)的加減 1
• 如果按的是shift并按向上或向下鍵，我們要對(duì)應(yīng)的加減 10
• 如果按的是alt并按向上或向下鍵，我們要對(duì)應(yīng)的加減 0.1
• 如果按的是ctrl并按向上或向下鍵，我們要對(duì)應(yīng)的加減 100, Mac 對(duì)應(yīng)的 cmd 鍵
• 如果輸入內(nèi)容為空，則根據(jù) min 值來(lái)計(jì)算

實(shí)現(xiàn)

這是完整的代碼，它相對(duì)簡(jiǎn)潔，僅約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); 
  } 
}); 

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

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

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

你在鍵盤上按下的每個(gè)鍵都有一個(gè)唯一的鍵碼。向上箭頭鍵是38向下箭頭鍵是40。因?yàn)槲也幌矚g代碼中的魔法數(shù)字，所以我們將它們存儲(chǔ)在一個(gè)對(duì)象中以便以后使用。

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

然后是監(jiān)聽 input 的 keydown 事件。keydown 可以告訴我們按下哪個(gè)鍵以及按下哪個(gè)修飾鍵的事件。我們感興趣的修飾鍵是shift，alt，ctrl和cmd。metaKey 對(duì)應(yīng)是 Mac 上是cmd鍵，在Windows中是 windows 鍵。

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

如果用戶是向左或向右鍵，我們將不執(zhí)行任何操作。我們?cè)诖a周圍添加了一個(gè)if子句，以便僅在用戶按向上或向下鍵盤才執(zhí)行。當(dāng)用戶按向上或向下鍵時(shí)，我們調(diào)用e.preventDefault()。這樣可以防止輸入內(nèi)容被更新，因?yàn)槲覀儠?huì)自己做。

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

你可能會(huì)認(rèn)為獲取值與獲取e.target.value一樣容易，但是，我們必須做更多的工作。e.target.value始終是一個(gè)字符串，即使對(duì)于npmber類型的 input 元素也是如此，因此，要進(jìn)行任何數(shù)學(xué)運(yùn)算，我們都需要將其轉(zhuǎn)換為數(shù)字。因?yàn)槲覀冃枰軌蚣?減0.1，所以我們需要使用浮點(diǎn)數(shù)而不是整數(shù)。

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

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

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

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

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

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

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

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

這里有點(diǎn)棘手，因?yàn)槲覀兪褂玫氖歉?dòng)。由于四舍五入的關(guān)系，JavaScript 中的浮點(diǎn)數(shù)可能會(huì)產(chǎn)生意想不到的結(jié)果。具體來(lái)說(shuō)，如果你加上例如0.1``和0.2，你得到的值是0.30000000000000004，大約是0.3。

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

const newValue = currentValue + direction * modifier; 

這是最終的結(jié)果值。我們知道當(dāng)前值，要增加或減少的數(shù)量以及是否需要增加或減少。

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

現(xiàn)在我們已經(jīng)計(jì)算了新值，但是由于前面提到的可能很奇怪的四舍五入，我們不能直接將它設(shè)置為新值作為輸入值，因?yàn)樗赡苡泻芏嘈?shù)。相反，我們使用toFixed與我們之前找到的小數(shù)的數(shù)目

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

這，就是所有的代碼。

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

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