如何強制讓輸入框的文字以大寫顯示？ （程式碼範例）

本篇文章帶給大家的內容是介紹強制讓輸入框的文字以大寫顯示的方法？ （程式碼範例），讓大家掌握多種強制轉換大寫的方法。有一定的參考價值，有需要的朋友可以參考一下，希望對你們有幫助。

有的時候，在一個表單裡，你只想接受某些輸入或textarea欄位中的大寫字母文字。那麼如何讓輸入的小寫字母強制轉換為大寫字母文字呢？從JavaScript到CSS和伺服器端程式碼，其實有有很多方法可以解決這個煩人的問題。

下面我們就透過簡單的程式碼範例來看看實作方法。

一、在輸入時使用JavaScript更改文字（必須使用英文輸入）

使用toUpperCase()轉換大寫

這是最明顯和最常見的方法，但也是使用者最不友善的方法。在每次按鍵時，都會觸發JavaScript事件以將值轉換為大寫。

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

我們來看看效果，輸入一個小寫的'a'，會出現：

但這個方法會出現其他問題：

1、當我們使用中文輸入法，在按shift輸入字元時，會出現重複字元；因此必須使用英文輸入。

2、嘗試在上面的輸入框中輸入“AAA”，選擇中間的“A”並嘗試將其變更為“ABBA”。你最終得到的是'ABAB'，因為設定值會將遊標移到文字的末尾。

接下來我們改進一下，可以定位遊標位置

如果將遊標移到文字中的較早位置並鍵入，它將被回顯到已輸入的文本的末尾。所以我們需要一些額外的程式碼來保留遊標位置：

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

看看效果，輸入ss：

並且當我們輸入“AAA”，選擇中間的“A”並嘗試將其更改為“ABBA”，也不會在出現'ABAB'的結果了。

二、使用css php變更文字

#實際上，如果表單輸入是大寫或小寫，則不重要。重要的是：

1、使用者看到的文字將被使用;

2、我們的表單處理程序在使用之前將文字轉換為大寫。

考慮到這一點，我們可以拋棄所有前面的JavaScript，而是使用簡單的CSS和PHP（或等效的後端）解決方案：

html css程式碼

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

php程式碼：

<?PHP
  $_POST[&#39;fieldname&#39;] = strtoupper($_POST[&#39;fieldname&#39;]);
?>

效果圖：

#如果使用適當的技術，你看到有多簡單嗎！單一CSS樣式（可以移動到外部樣式表），加上一行PHP，可能已經存在。不需要JavaScript或jQuery。

總結：以上就是這篇文章所介紹的全部內容，希望能對大家的學習有所幫助。

以上是如何強制讓輸入框的文字以大寫顯示？ （程式碼範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！