前端開發：將輸入的英文轉成大寫

有時候我們需要限制輸入框只能輸入大寫符號，這時候我們可以使用javascript，將已經輸入的英文字母自動轉成大寫的英文字母。

使用javascript將輸入的英文轉成大寫

<input type="text" onblur="this.value = this.value.toUpperCase();">

上面這段是在輸入框失去焦點的時候觸發，也就是當滑鼠點繫到輸入框的其他地方或是使用tab鍵將焦點移到下一個物件時觸發。

當然我們也可以選擇在放開鍵盤時觸發。只是這樣子做有一個缺點。

<input type="text" onKeyUp="this.value = this.value.toUpperCase();">

如果我們先在輸入框中輸入“ AAA”，接著選擇中間的“ A”，然後輸入BB，理想上我們應該得到“ ABBA”，但是最終得到的是’ABAB’，這是因為每個我們放開鍵盤的時候，滑鼠遊標都會自動移到最尾端。

解決的方法如下，這下子滑鼠遊標就不會亂跑了。

<input type="text" onkeyup=" var start = this.selectionStart; var end = this.selectionEnd; this.value = this.value.toUpperCase(); this.setSelectionRange(start, end); ">

使用css將輸入的英文轉成大寫

<input style="text-transform: uppercase;" type="text">

這其實只是一個障眼法，實際上你傳送出去的還是小寫字母。

另提供codepen的範例給您參考：https://codepen.io/ellen-shih/pen/eYNxoZY

喜歡本次的分享嗎？別忘了追蹤歐斯瑞的臉書粉絲團、Instagram和訂閱電子報，隨時收到第一手消息唷！