争怎路由网/网站教程/内容

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

网站教程2024-05-11 阅读
网页的本质就是超级文本标记语言，通过结合使用其他的Web技术（如：脚本语言、公共网关接口、组件等），可以创造出功能强大的网页。因而，超级文本标记语言是万维网（Web）编程的基础，也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点。
本篇文章给大家带来的内容是介绍强制让输入框的文本以大写显示的方法？（代码示例），让大家掌握多种强制转换大写的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。

有的时候，在一个表单里，你只想接受某些输入或textarea字段中的大写字母文本。那么如何让输入的小写字母强制转换为大写字母文本？从JavaScript到CSS和服务器端代码，其实有有很多方法可以解决这个烦人的问题。

下面我们就通过简单的代码示例来看看实现方法。

一、在输入时使用JavaScript更改文本（必须使用英文输入）

使用toUpperCase()转换大写

这是最明显和最常见的方法，但也是用户最不友好的方法。在每次击键时，都会触发JavaScript事件以将值转换为大写。

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

我们来看看效果，输入一个小写的‘a’，会出现：

1.jpg

但这种方法会出现其他问题：

1、当我们使用中文输入法，在按shift输入字符时，会出现重复字符；因此必须使用英文输入。

2.jpg

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：

3.jpg

并且当我们输入“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']);
?>
效果图：
4.jpg
如果使用适当的技术，你看到有多简单吗！单个CSS样式（可以移动到外部样式表），加上一行PHP，可能已经存在。不需要JavaScript或jQuery。
总结：以上就是本篇文章所介绍的全部内容，希望能对大家的学习有所帮助。
以上就是如何强制让输入框的文本以大写显示？（代码示例）的详细内容，更多请关注php中文网其它相关文章！
				
				
网站建设是一个广义的术语，涵盖了许多不同的技能和学科中所使用的生产和维护的网站。



      
……
标签:如何强制让输入框的文本以大写显示？（代码示例）
 
相关阅读