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

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();"/>

 

写在最后

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

 相关推荐：

posted @ 2018-05-25 07:24  Marydon  阅读(993)  评论(0)  编辑  收藏  举报