Java如何使用增強(qiáng)型的<input type=number>

本篇內(nèi)容主要講解“Java如何使用增強(qiáng)型的<input type=number>”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“Java如何使用增強(qiáng)型的<input type=number>”吧!

input 標(biāo)簽的 number  類型提供了一種處理數(shù)字的好方法。我們可以使用min和max屬性設(shè)置界限，并且可以通過(guò)向上和向下鍵來(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);

這，就是所有的代碼。

到此，相信大家對(duì)“Java如何使用增強(qiáng)型的<input type=number>”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！