文本框Input中字母大写小写转换的代码

发布时间：2018-10-05 13:31 所属栏目：30 来源：站长网

导读：烈火网的下载栏目因为网站编辑需要，经常要把URL的名字定义为软件名称，但是软件的名称一般都写首写或全部写为大写状态，这样在定义URL时复制过来的文本就不规范了，于是想到用JS和CSS来实现文本框Input中字母大写小写转换功能。首先，烈火下载（www.very

　　烈火网的下载栏目因为网站编辑需要，经常要把URL的名字定义为软件名称，但是软件的名称一般都写首写或全部写为大写状态，这样在定义URL时复制过来的文本就不规范了，于是想到用JS和CSS来实现文本框Input中字母大写小写转换功能。

　　首先，烈火下载（www.veryhuo.com/down）要实现的是在文本框输入大写字母自动转换为小写，代码是：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>演示代码-烈火学院Veryhuo.Com</title> </head> <input name="veryhuo" type="text" onkeyup="this.value=this.value.toLowerCase()" /> <body> </body> </html> <br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

　　通过上面的实现，我们可以举一反三了，把toLowerCase()修改为toUpperCase()就可以了嘛，再来看看效果：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>演示代码-烈火学院Veryhuo.Com</title> </head> <input name="veryhuo" type="text" onkeyup="this.value=this.value.toUpperCase()" /> <body> </body> </html> <br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

　　后来，一个站长朋友提出使用CSS实现的方法，这个方法可以实现表面上的小写转大写，但是在提交表单和复制粘贴时是不起作用的，看演示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>演示代码-烈火学院Veryhuo.Com</title> </head> <input name="veryhuo" type="text" style="text-transform:uppercase;" /> <body> </body> </html> <br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：ASP站长网）