强制让输入框文本以大写显示的方法

这篇文章将为大家详细讲解有关强制让输入框文本以大写显示的方法，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

一、在输入时使用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。

关于强制让输入框文本以大写显示的方法就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。