超越基礎：使用 `` 像專業人士一樣處理數位輸入

什麼是

根據 MDN 文件定義： number 類型的元素用於讓使用者輸入數字。它們包括內建驗證以拒絕非數位條目。

所以基本上，它是一個增強我們蹩腳網站和網路應用程式使用者體驗的功能。雖然它是一個簡化數位輸入的好功能，但它有一些行為一開始可能並不明顯，但身為 Web 開發人員我們應該要意識到這一點。

這些行為與：

1. 虛擬鍵盤
2. 科學記數法

虛擬鍵盤

虛擬鍵盤是出現在螢幕上的鍵盤，通常出現在手機、平板電腦/ipad 等觸控輸入裝置和一些輔助技術中。

<input id="numeric-input" type="number">

只使用 type="number" 乍看之下似乎沒問題，但在使用虛擬鍵盤時就會出現問題。它可能會打開全鍵鍵盤而不是數字鍵盤，這會損害使用者體驗和輸入準確性。

`" />

解法輸入方式

雖然在較新的作業系統和瀏覽器版本上可能不會出現虛擬鍵盤問題，但使用inputmode 屬性仍然是一個好主意，因為它暗示用戶在編輯元素或其元素時可能輸入的資料類型內容。
這允許瀏覽器為所有版本和裝置顯示適當的虛擬鍵盤，從而改善應用程式的整體使用者體驗 (UX)。

inputmode 可以有許多值，但對於我們使用數位輸入的用例，我們應該使用以下兩個值之一：
1.數字

<input id="numeric-input" type="number" inputmode="numeric">

輸入型數接受任何有理值。如果您不接受小數值而只接受整數，則在這種情況下應首選使用數值。

2.十進位

<input id="numeric-input" type="number" inputmode="decimal">

如果您接受小數，請使用十進制值，因為它將顯示一個虛擬鍵盤，其中包含使用者區域設定的數字和小數分隔符號。

總是喜歡在輸入中使用小數值，除非您不接受小數值。

`" />

科學記數法

我們中的許多人可能已經忘記或不知道 e 或 E 是科學計數法中的有效數值。

`" />

是的，e或E在科學計數法中表示「十的指數」，用來表示非常大或非常小的值。例如

1e5 = 100000 
     or 
1e-5 = 0.00001

HTML 輸入類型數字的設計考慮到了靈活性，並且它支援這種科學記數法，允許輸入指數（例如 1e5）。雖然這本身不是問題，並且在某些情況下很有用，但當輸入僅包含基本數字時，它可能會出現問題。

有兩種方法可以限制輸入只能輸入數字且不允許輸入科學計數法。

1. 使用正規表示式？圖案。
2. 使用 Javascript（我的首選方法）。

使用 Javascript 防止預設行為

在大多數情況下，我不希望使用者輸入「e」或「E」符號，因為不需要它們，並且允許它們可能會導致一些意外的問題。

實現此目的的方法有很多，但我最喜歡的方法是防止「e」或「E」鍵被註冊。我們可以使用 keydown 事件和 PreventDefault 來實現這一點。

 element.addEventListener("keydown", (e) => {
    if (["e", "E"].includes(e.key)) {
      // you can also add "+" and "-" if you want to prevent them from being registered.
      e.preventDefault();
    }
  });

我特別喜歡這個方法，因為三個原因：

• 它向稍後閱讀我們程式碼的任何人提供了一個明確的訊息，即我們不想註冊 e 或 E 鍵。
• 它還可以提供更好的使用者體驗，因為我們沒有註冊金鑰本身，而是更改值。
• keydown 事件的類型是 KeyboardEvent，它使我們能夠直接存取關鍵值，從而提高解決方案的整體 DX。

並非所有數字輸入都需要是輸入類型數字

有時，如果我們看到接受數字輸入的輸入要求，我們可以本能地找到輸入類型數字，但有時輸入類型數字並不是此類場景的正確解決方案。

此類場景的一些例子是：

• 信用卡/金融卡：當我們有信用卡/金融卡的輸入字段時，最好不要使用輸入類型數字，而是使用輸入類型文本，輸入模式為數字並且使用您首選的方法進行驗證，因為信用卡可以有前導零值，而某些瀏覽器可能不允許這樣做，我們也可能想要添加一些卡特定的驗證或允許一組四個數字之間的空格（因為它印在卡片上） ）。

• 郵遞區號：雖然大多數國家都有數位郵遞區號，但加拿大等一些國家可能有字母數字代碼，重要的是根據您的需求使用解決方案，它可以是輸入類型數字或輸入類型文字。

• 手機號碼：您應該始終使用 input="tel" 的輸入類型以及適合您的用例的正規表示式模式。

結論

由於現代HTML 提供了一些非常好的實用程序，有些事情可能感覺實現起來非常簡單，例如輸入類型數字，但是作為開發人員，我們應該始終關注這些實用程序以及如何利用它們來創建更好的使用者體驗。

如果您喜歡這篇文章，請發表評論，如果您不喜歡某些內容，可以在評論中留下您的回饋。

我喜歡與人們聯繫並談論科技及其相關事件。您可以在 Twitter/X 和 LinkedIn 上與我聯絡。

您也可以在 Dev.to 上關注我，以便在我發布新文章時收到通知。

以上是超越基礎：使用 `` 像專業人士一樣處理數位輸入的詳細內容。更多資訊請關注PHP中文網其他相關文章！