強制讓輸入框文本以大寫顯示的方法

這篇文章將為大家詳細講解有關強制讓輸入框文本以大寫顯示的方法，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

一、在輸入時使用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['fieldname'] = strtoupper($_POST['fieldname']);
?>

效果圖：

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

關于強制讓輸入框文本以大寫顯示的方法就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。