input输入框小写字母自动转换成大写字母的几种方式

input输入框输入小写字母自动转换成大写字母有两种方法:

1.用js onkeyup事件,即时把字母转换为大写字母:
html里input加上

<input type="text" id="txt1" value="" onkeyup="toUpperCase(this)"/>

js函数操作

function toUpperCase(obj)
 {
 obj.value = obj.value.toUpperCase()
 }

这种方法虽然可以,但是输入汉字的时候会受到干扰。

2.还有一种更好的方法,加css样式进行控制处理,用到:text-transform属性,将其设置为uppercase

 <input type="text" id="txt1" value="" style="text-transform:uppercase"/>

效果如下:
input输入框小写字母自动转换成大写字母的几种方式_第1张图片
输入小写时,自动显示为大写,中文汉字不受影响。

扩展1:
如果想将输入框大写转化为小写,则用text-transform:lowercase;
属性

<input  name="username" type="text" value=""  style="text-transform:lowercase;"/>

扩展2:
如果想将单词首字母转化为大写,则用text-transform: capitalize; 属性

<input  name="username" type="text" value=""  style="text-transform:capitalize;"/>

扩展:3:
如果想屏蔽中文和空格:用 οnkeyup=“value=value.replace(/[^\w./]/ig,‘’)”

 <input  name="username" type="text" value="" placeholder="数字字母组合" onkeyup="value=value.replace(/[^\w\.\/]/ig,'')" style="text-transform:lowercase;"/>

总结:
text-transform: uppercase /转为大写/
text-transform: lowercase /转为小写/
text-transform: capitalize /单词首字母转为大写/

你可能感兴趣的:(前端,css)