2023-06-29

[Javascript] input 輸入處理:限制只允許輸入英文、數字和橫線 (-) 並自動轉換為大寫

最近我遇到了一個 JavaScript 的問題,雖然不是什麼大事,但對方需要在一個 input 欄位中,只允許輸入英文、數字和橫線 (-)。

此外,他希望輸入小寫英文字母時自動轉換為大寫。儘管這聽起來有些簡單,但每次都需要重新寫一次,因此我想將這個解決方案記錄下來。




這裡是我所使用的方法:在 onKeypress 事件中使用正則表達式(regex)進行輸入阻擋,

確保只有英文、數字和橫線 (-) 能夠進入。接著,在 onKeyUp 事件中,我將輸入的文字轉換為大寫,確保統一的輸入格式。



值得一提的是,我在網路上看到了一個使用 CSS 的方法,即使用 style="text-transform: uppercase"。

這樣可以讓輸入的字"看起來"是大寫,但在取值時仍然是小寫。雖然這是一個簡單的做法

但需要特別注意。如果在送出前將值轉換為大寫,也是一種方便的解決方案,避免使用 onKeyUp 的方法。