最近我遇到了一個 JavaScript 的問題,雖然不是什麼大事,但對方需要在一個 input 欄位中,只允許輸入英文、數字和橫線 (-)。
此外,他希望輸入小寫英文字母時自動轉換為大寫。儘管這聽起來有些簡單,但每次都需要重新寫一次,因此我想將這個解決方案記錄下來。
這裡是我所使用的方法:在 onKeypress 事件中使用正則表達式(regex)進行輸入阻擋,
確保只有英文、數字和橫線 (-) 能夠進入。接著,在 onKeyUp 事件中,我將輸入的文字轉換為大寫,確保統一的輸入格式。
值得一提的是,我在網路上看到了一個使用 CSS 的方法,即使用 style="text-transform: uppercase"。
這樣可以讓輸入的字"看起來"是大寫,但在取值時仍然是小寫。雖然這是一個簡單的做法
但需要特別注意。如果在送出前將值轉換為大寫,也是一種方便的解決方案,避免使用 onKeyUp 的方法。