不用 JavaScript 实现文本框内容字母自动大写

作者:vkvi 来源:ITPOW(原创) 日期:2010-1-26

向文本框输入文字时,如何让小写字母自动变为大写呢?很多人想到用 JavaScript,比如:

<input name="t1" type="text" onkeyup="this.value=this.value.toUpperCase()" />

但这并不好,原因有二:

  • 效果不好,我们会看到:先显示小写,再变成大写;
  • 如果我用鼠标右键的复制、粘贴,就无法触发事件。

有人说,把 onkeyup 改为 onchange 怎么样?onchange 更糟,因为 onchange 只有在焦点移开的时候才触发。

有人又说,那把 onkeyup 改为 onpropertychange 怎么样?哎,这东西只有 IE 支持。

正确又简单的做法是利用 CSS

<input name="t1" type="text" style="text-transform:uppercase;" />

text-transform 有四个可选:

  • none 默认值。无转换发生
  • capitalize 将每个单词的第一个字母转换成大写,其余无转换发生
  • uppercase 转换成大写
  • lowercase 转换成小写
相关文章