css 设置英文字母大小写转换（text-transform）

Heaven helps those who help themselves
资深码农+深耕理财=财富自由
欢迎关注

css 设置英文字母大小写转换（text-transform）

Created by Marydon on 2018-05-25 07:24

1.情景展示

限制文本框录入的英文字母小写，如何实现？

2.原因分析

通过css的text-transform样式来实现 

3.解决方案

text-transform语法：

        text-transform : none | capitalize | uppercase | lowercase
　　　　　　取值：
　　　　　　none :　 默认值。无转换发生
　　　　　　capitalize :　 将每个单词的第一个字母转换成大写，其余无转换发生
　　　　　　uppercase :　 转换成大写
　　　　　　lowercase :　 转换成小写

3.举例

/*将输入的英文字母转全部换成大写字母*/
text-transform:uppercase;
<input type="text" name="mobile" style="text-transform:uppercase;" />
UpdateTime--2017年1月9日10:23:23
/*将输入的英文字母转全部换成小写字母*/
text-transform:lowercase;
<input type="text" style="text-transform:lowercase;"/>

4.通过JS添加css样式

$('#TABLENAME').css({'text-transform':'lowercase'});

5.通过js控制录入内容

<!-- 禁止录入中文&控制英文小写 -->
<input type="text" class="TextBox" id="TABLENAME" name="TABLENAME"
     onkeyup="this.value=this.value.replace(/[\u4e00-\u9fa5]/g,'');this.value=this.value.toLowerCase();"/>

小写：stringObject.toLowerCase()；

大写：stringObject.toUpperCase()；

2022年6月19日19:16:20

6.css+js同时作用

<input type="text" class="TextBox"
   style="width: 110px;text-transform:uppercase;ime-mode:disabled;"
   name="TABLE_NAME" id="TABLE_NAME"
   onkeyup="this.value=this.value.replace(/[\u4e00-\u9fa5]/g,'');this.value=this.value.toUpperCase();"/>

 

写在最后

　　哪位大佬如若发现文章存在纰漏之处或需要补充更多内容，欢迎留言！！！

 相关推荐：

• 个人主页
• css 禁止录入中文
• CSS知识点集锦
• 文本框input:text
• 控制input只能录入数字
• js 正则表达式校验必须包含字母、数字、特殊字符

与君共勉：最实用的自律是攒钱，最养眼的自律是健身，最健康的自律是早睡，最改变气质的自律是看书，最好的自律是经济独立 。

您的一个点赞，一句留言，一次打赏，就是博主创作的动力源泉！

↓↓↓↓↓↓写的不错，对你有帮助？赏博主一口饭吧↓↓↓↓↓↓