如何限制輸入元素中允許的字符集？

Question

我知道這個問題曾經被問過，但是我在這里看到的所有解決方案都有一定的局限性。

我要實現的目標：我有一個輸入字段，應只允許輸入或粘貼字母數字字符，並且總長度不得超過N個字符。 它應該可以在移動瀏覽器中使用。

到目前為止我嘗試過的是：

1. 輸入事件。 僅在失去焦點時觸發。
2. onkeypress事件（ return this.value.length < 8 && (event.keyCode >= 65 && event.keyCode <= 90 || event.keyCode >= 97 && event.keyCode <= 122 || event.keyCode >= 48 && event.keyCode <= 57) ）。 不會影響粘貼，並且出於某些奇怪的原因在Android的Chrome瀏覽器中根本無法使用。
3. 模式屬性。 工作正常，但不“即時”驗證任何內容-提交表單時進行所有驗證。

據我所知，這是一項典型的任務（CVV代碼/付款單上的卡號，電子商務中的訂單號等），但是所有解決方案都有一些缺點。 似乎我缺少了一些東西。 請幫忙。

Answer 1

我曾經需要做同樣的事情，但我發現最好的解決方案是在每次輸入字段發生更改時都調用一個偵聽器。 為此，您應該可以使用oninput html屬性或相應的input javascript事件。

W3Schools的這個演示很好地展示了它如何響應輸入更改。 特別是，它不僅會在失去焦點時觸發，而且在粘貼文本時也會起作用。 當然，在偵聽器內部，您可以檢查輸入中的當前文本是否符合您的要求。

此解決方案甚至更酷的是，您甚至可以從偵聽器內部在輸入字段中編輯文本。 為此，您需要使用addEventListener(...)將偵聽器添加到javascript中的input事件中，然后只需使用this.value = 'new text'; 。

Answer 2

使用輸入模式怎么樣？

<input type="text" pattern="[A-Za-z]{3}" title="Three letters">
<input type="text" pattern="[0-9]{3}" title="Three numbers">    
<input type="text" pattern="[A-Za-z0-9]{3}" title="Three alphanumeric">

結合這樣的答案和這個

Answer 3

當您將type = number屬性放置到輸入時，使用內置在Html5輸入中的驗證將防止非數字輸入。 如果要設置允許輸入的最大數字，也可以使用max屬性。 您仍然需要實現某種類型的客戶端代碼，以防止使用舊版瀏覽器出現數字，但是基本的Html5驗證在任何不錯的“真實”瀏覽器（Chrome，Firefox，IE v9 +等）上都能為您帶來很多幫助

這是有關輸入type =“ number”的文檔

• 元素會自動使所有非數字條目無效（或為空，除非指定了必填項）。
• 您可以使用required屬性使空白條目無效，即必須填寫輸入。
• 您可以使用step屬性將有效值約束為一組特定的步驟（例如10的倍數）。
• 您可以使用min和max屬性將有效值限制在上下限。