Java如何使用增強型的<input type=number>

本篇內容主要講解“Java如何使用增強型的<input type=number>”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“Java如何使用增強型的<input type=number>”吧!

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);

這，就是所有的代碼。

到此，相信大家對“Java如何使用增強型的<input type=number>”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！