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

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

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

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

js函数操作

function toUpperCase(obj)
 {
 obj.value = obj.value.toUpperCase()
 }
1
2
3
4

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

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

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

效果如下：

输入小写时，自动显示为大写，中文汉字不受影响。

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

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

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

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

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

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

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