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"/>

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

扩展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 /单词首字母转为大写/