文章彙整

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

Astral WebBy Astral Web 8 months agoNo Comments
首頁  /  網站設計與開發  /  前端開發:將輸入的英文轉成大寫

有時候我們需要限制輸入框只能輸入大寫符號,這時候我們可以使用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訂閱電子報,隨時收到第一手消息唷!

以上內容由Astralweb 歐斯瑞編寫製作

 000

推薦文章

Category:
  網站設計與開發

留下回應

你的電子郵件地址不會被公開.

請到您的信箱確認,即可完成訂閱。