建站
咨詢
售后
建站咨詢
新聞中心
本文轉載自微信公眾號「大遷世界」，轉載本文請聯(lián)系大遷世界公眾號。
創(chuàng)新互聯(lián)成立十余年來，這條路我們正越走越好，積累了技術與客戶資源，形成了良好的口碑。為客戶提供成都網站建設、成都網站設計、網站策劃、網頁設計、國際域名空間、網絡營銷、VI設計、網站改版、漏洞修補等服務。網站是否美觀、功能強大、用戶體驗好、性價比高、打開快等等，這些對于網站建設都非常重要，創(chuàng)新互聯(lián)通過對建站技術性的掌握、對創(chuàng)意設計的研究為客戶提供一站式互聯(lián)網解決方案，攜手廣大客戶，共同發(fā)展進步。
input 標簽的 number 類型提供了一種處理數(shù)字的好方法。我們可以使用min和max屬性設置界限，并且可以通過向上和向下鍵來添加或減少1，如果設置step屬性，則向上或向下鍵來添加或減少對應的 step 值。但是，如果我們想讓用戶以不同的step上下移動，該怎么辦?
step不僅決定要添加或刪除的數(shù)量，還決定了該數(shù)字的限制位置。如果輸入的值為5，step 為10，然后按向上鍵，不會得到15(5 + 10)，而是10(最接近的 step倍數(shù))。
那么，我們希望用戶可以輸入任何數(shù)字又想增加10，要怎么做?
如何增強 input type=number 體驗
先來定義一些按鍵操作。當用戶在 input 標簽中使用方向鍵時，有一些對應的快捷操作：
- 如果按的是向上或向下鍵盤，我們要對應的加減 1
- 如果按的是shift并按向上或向下鍵，我們要對應的加減 10
- 如果按的是alt并按向上或向下鍵，我們要對應的加減 0.1
- 如果按的是ctrl并按向上或向下鍵，我們要對應的加減 100, Mac 對應的 cmd 鍵
- 如果輸入內容為空，則根據(jù) min 值來計算
實現(xià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);
- }
- });
這段代碼有些部分可能不是很好看懂，我們來逐行看看，表示的含義。
- const isMac = navigator.platform === 'MacIntel';
- const KEY = {
- UP: 38,
- DOWN: 40,
- };
在 Windows 和 Linux 中，ctrl是我們想要使用的鍵，但在 Mac 上更常用的是cmd。isMac是一個布爾值，表示是 Mac 還是 Window 系統(tǒng)。
你在鍵盤上按下的每個鍵都有一個唯一的鍵碼。向上箭頭鍵是38向下箭頭鍵是40。因為我不喜歡代碼中的魔法數(shù)字，所以我們將它們存儲在一個對象中以便以后使用。
- document.querySelector('input').addEventListener('keydown', e => {
- ...
- }
然后是監(jiān)聽 input 的 keydown 事件。keydown 可以告訴我們按下哪個鍵以及按下哪個修飾鍵的事件。我們感興趣的修飾鍵是shift，alt，ctrl和cmd。metaKey 對應是 Mac 上是cmd鍵，在Windows中是 windows 鍵。
- if ([KEY.UP, KEY.DOWN].includes(e.keyCode)) {
- e.preventDefault();
- ...
- }
如果用戶是向左或向右鍵，我們將不執(zhí)行任何操作。我們在代碼周圍添加了一個if子句，以便僅在用戶按向上或向下鍵盤才執(zhí)行。當用戶按向上或向下鍵時，我們調用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 元素也是如此，因此，要進行任何數(shù)學運算，我們都需要將其轉換為數(shù)字。因為我們需要能夠加/減0.1，所以我們需要使用浮點數(shù)而不是整數(shù)。
是，如果輸入為空，我們調用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 中的浮點數(shù)可能會產生意想不到的結果。具體來說，如果你加上例如0.1``和0.2，你得到的值是0.30000000000000004，大約是0.3。
在進行基本計算時，0 的數(shù)量太多，但并不重要，在 input 元素中，0.30000000000000004看起來不是很好。我們只要 0.3。為了達到這個目的，我們需要知道在計算前的小數(shù)的最大數(shù)量是多少，就是當前輸入的小數(shù)的數(shù)量，或者是按下alt鍵時的1，兩者中哪個更大。我們存儲這個值以便以后使用。
- const newValue = currentValue + direction * modifier;
這是最終的結果值。我們知道當前值，要增加或減少的數(shù)量以及是否需要增加或減少。
我們將modifier(要添加的數(shù)量)與direction(即+1或-1)相乘，以便在將其添加到當前值時可以相加或相減。
現(xiàn)在我們已經計算了新值，但是由于前面提到的可能很奇怪的四舍五入，我們不能直接將它設置為新值作為輸入值，因為它可能有很多小數(shù)。相反，我們使用toFixed與我們之前找到的小數(shù)的數(shù)目
- e.target.value = newValue.toFixed(decimals);
這，就是所有的代碼。
這個input可以讓用戶快速增加或減少數(shù)值，或者精確地鎖定一個數(shù)字，這取決于用戶按的是哪個修改鍵。
原文：https://kilianvalkhof.com/2020/javascript/supercharging-input-type-number/
網站題目：增強型的
網站URL：http://www.dlmjj.cn/article/ccsdges.html
