方法1:使用JS

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

方法2:使用CSS

<input name="t1" type="text" style="text-transform:uppercase;" />

text-transform的取值有4个:

  1. none:默认值,不会发生任何转换
  2. capitalize:每个单词的首字母大写。
  3. uppercase:大写转换。
  4. lowercase:小写转换。

两者区别:

  • 区别1:用户体验

方法1(JS)方法在使用时,会给用户一种转换感,用户体验不如第二种方法。

  • 区别2:value是否大写

方法1(JS)方法可以将页面的text值及value值均修改为大写,而第二种方法只能讲显示的修改为大写(其本质是CSS),因此需要转为大写的,仍然需要在后台将转为大写。

建议

在界面中使用方法二,传给后台时,再进行大写转换。

input输入自动大写的更多相关文章

  1. DataList:HTML5中的input输入框自动提示宝器

    DataList的作用是在你往input输入框里输入信息时,根据你敲进去的字母,自动显示一个提示下列列表,很像百度或谷歌的搜索框的自动提示,在飞机票火车票的搜索页面上也有这样的效果.它是HTML5里新 ...

  2. 如何让input框自动获得焦点

    项目中有个需求  一个用扫描枪输入的input框 为了避免每次都需要人为点击 需要做成当打开页面时该input框自动获取焦点 <input type="text" name= ...

  3. jquery 实现邮箱输入自动提示功能:(二)

    上篇文章写到了一个不错的jquery实现邮箱输入自动提示功能,发现还有一个不错的自动提示插件: 先展示结果如图: html代码: <center> <h1>输入邮箱试试!< ...

  4. jquery 实现邮箱输入自动提示功能:(一)

    记得去年做某个项目的时候,用到了邮箱输入自动提示功能,于是网上搜了一下,发现了这个写得不错,现在回想起来,转载一下,方便查阅. 邮箱的广泛使用得益于它的免费,因此很多网站在注册的时候都会直接使用邮箱作 ...

  5. jQuery实现用户输入自动完成功能

    jQuery实现用户输入自动完成功能 利用jQuery UI中Auto-complete插件实现输入自动完成功能,大家在使用诸如淘宝.京东等电商平台搜索商品时,往往只要输入商品的一些特殊字符,就可以显 ...

  6. 实时监听input输入内容的N种方法

    现在有一个需求,需要我们实时监听input输入框中的内容,从而带来更好的用户体验,而不是等我们全部输入完毕才告诉我们格式不对首先我们创建一个input输入框 <form name='loginF ...

  7. 正则表达式控制Input输入内容 ,js正则验证方法大全

    https://blog.csdn.net/xushichang/article/details/4041507 //输入姓名的正则校验 e.currentTarget.value = e.curre ...

  8. input输入样式,动画

    模板描述:input输入样式 动画,有输入框也有搜索框的样式,多种多样,大家根据自己的喜欢来. 找网站SEO教程,网站模板,以及想要建立个人博客的朋友来涂志海个人博客网,这里有你想要的一切(万一没有的 ...

  9. input输入子系统

    一.什么是input输入子系统? 1.Linux系统支持的输入设备繁多,例如键盘.鼠标.触摸屏.手柄或者是一些输入设备像体感输入等等,Linux系统是如何管理如此之多的不同类型.不同原理.不同的输入信 ...

随机推荐

  1. UVa 481 - What Goes Up

    题目大意:给你一系列数,找出它的最长(严格)递增子序列. 由于数据量较大,使用O(n2)的LIS算法会超时,要使用O(nlogn)的LIS算法,这里有详细的介绍. #include <cstdi ...

  2. AngularJS中使用的表单验证

    Reference: http://www.tuicool.com/articles/2Qbiqi 客户端表单验证是AngularJS里面最酷的功能之一. AngularJS表单验证可以让你从一开始就 ...

  3. 笔记整理--玩转robots协议

    玩转robots协议 -- 其他 -- IT技术博客大学习 -- 共学习 共进步! - Google Chrome (2013/7/14 20:24:07) 玩转robots协议 2013年2月8日北 ...

  4. centos5.5 Apache2 Web 服务器的安装

    # vi /etc/httpd/conf/httpd.conf 把以下虚拟机的配置加在 httpd.conf  文件末尾即可 NameVirtualHost *:80               // ...

  5. gec210 NAND BOOT与SD BOOT启动原理

    CPU上电后,此时SP指针指向0x0000_0000,从这个地址取第一条指令.但此时:PLL没有启动,CPU工作频率为外部输入晶振频率,非常低(S5PV210中晶振在CPU旁边,两颗24MHz,一颗2 ...

  6. Java语言与C语言之间的应用比较

    http://book.51cto.com/art/200906/131809.htm C语言能干的Java也能干的如下: 网络应用层协议服务程序开发:如WebServer.FTPServer.Mai ...

  7. Visual Studio 2015的安装与基本使用

    为什么要使用Visual Studio 2015? 它是中文的.界面友好.自动补全.实时语法错误提示(上图中波浪线部分).单步调试……最重要的社区版是免费的!所以你不必再使用破解的.老旧的的不兼容现代 ...

  8. NSNotificationCenter机制

    作用:NSNotificationCenter是专门供程序中不同类间的消息通信而设置的. 注册通知:即要在什么地方接受消息 [[NSNotificationCenter defaultCenter]  ...

  9. Java泛型的类型擦除

    package com.srie.testjava; import java.util.ArrayList; import java.util.List; public class TestGener ...

  10. python中关于__init__模块文件的理解

    一般来说新建的一个包下,必然会有一个__init__文件?那么这个文件到底邮有和作用呢? 总结几点如下: 1.__init__文件在包下,其中定义了包的属性,方法;必须要有这个文件,如果没有的话,这个 ...