強(qiáng)制讓輸入框文本以大寫(xiě)顯示的方法

這篇文章將為大家詳細(xì)講解有關(guān)強(qiáng)制讓輸入框文本以大寫(xiě)顯示的方法，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

一、在輸入時(shí)使用JavaScript更改文本（必須使用英文輸入）

使用toUpperCase()轉(zhuǎn)換大寫(xiě)

這是最明顯和最常見(jiàn)的方法，但也是用戶(hù)最不友好的方法。在每次擊鍵時(shí)，都會(huì)觸發(fā)JavaScript事件以將值轉(zhuǎn)換為大寫(xiě)。

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

我們來(lái)看看效果，輸入一個(gè)小寫(xiě)的‘a(chǎn)’，會(huì)出現(xiàn)：

但這種方法會(huì)出現(xiàn)其他問(wèn)題：

1、當(dāng)我們使用中文輸入法，在按shift輸入字符時(shí)，會(huì)出現(xiàn)重復(fù)字符；因此必須使用英文輸入。

2、嘗試在上面的輸入框中輸入“AAA”，選擇中間的“A”并嘗試將其更改為“ABBA”。你最終得到的是'ABAB'，因?yàn)樵O(shè)置值會(huì)將光標(biāo)移動(dòng)到文本的末尾。

接下來(lái)我們改進(jìn)一下，可以定位光標(biāo)位置

如果將光標(biāo)移動(dòng)到文本中的較早位置并鍵入，它將被回顯到已輸入的文本的末尾。所以我們需要一些額外的代碼來(lái)保留光標(biāo)位置：

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

看看效果，輸入ss：

并且當(dāng)我們輸入“AAA”，選擇中間的“A”并嘗試將其更改為“ABBA”，也不會(huì)在出現(xiàn)'ABAB'的結(jié)果了。

二、使用css+php更改文本

實(shí)際上，如果表單輸入是大寫(xiě)或小寫(xiě)，則不重要。重要的是：

1、用戶(hù)看到的文本將被使用;

2、我們的表單處理程序在使用之前將文本轉(zhuǎn)換為大寫(xiě)。

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

html+css代碼

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

php代碼：

<?PHP
  $_POST['fieldname'] = strtoupper($_POST['fieldname']);
?>

效果圖：

如果使用適當(dāng)?shù)募夹g(shù)，你看到有多簡(jiǎn)單嗎！單個(gè)CSS樣式（可以移動(dòng)到外部樣式表），加上一行PHP，可能已經(jīng)存在。不需要JavaScript或jQuery。

關(guān)于強(qiáng)制讓輸入框文本以大寫(xiě)顯示的方法就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。