将文本框内容变大写的几种实现方式

来源：互联网发布：ipad小说软件编辑：程序博客网时间：2024/05/21 18:40

将文本框内容变大写的几种实现方式

使用onkeyup事件进行实现。

<html><head><script type="text/javascript">function upperCase(x){var y=document.getElementById(x).valuedocument.getElementById(x).value=y.toUpperCase()}</script></head><body>输入您的姓名： <input type="text" id="fname" onkeyup="upperCase(this.id)" /></body></html>

该方式的实现原理是，在用户输入完毕后，才会将文本框的内容进行转换，换句话说，只有当你输入完毕，手离开某个按键后，才会进行转换，并且在浏览器上是可以可能到输入的小写字符.
使用**text-transform:uppercase;**CSS样式进行实现。

<html><head></head><body>输入您的姓名： <input type="text" id="fname" style="text-transform:uppercase;" /></body></html>

该方式的最大优点就是省代码了，不过该方式的情况下，就算你已经切换到了小写输入法，那你在文本框输入的字符只会显示大写，相比较第一种实现方式而言，你是看不到字符由小写转换为大写的过程

阅读全文

0 0