如何强制让输入框的文本以大写显示？（代码示例）

有的时候，在一个表单里，你只想接受某些输入或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['fieldname'] = strtoupper($_POST['fieldname']);
?>

效果图：

如果使用适当的技术，你看到有多简单吗！单个CSS样式（可以移动到外部样式表），加上一行PHP，可能已经存在。不需要JavaScript或jQuery。

总结：以上就是本篇文章所介绍的全部内容，希望能对大家的学习有所帮助。

以上就是如何强制让输入框的文本以大写显示？（代码示例）的详细内容，更多请关注Gxl网其它相关文章！