你如何自动设置文本框为大写？

我正在使用下面的样式属性将用户input设置为大写，这样当用户开始在文本框例如railway ，它应该被修改为像RAILWAY这样的大写字母，而不需要用户按下Caps-lockbutton。

这是我用于input的代码：

 <input type = "text" class = "normal" name = "Name" size = "20" maxlength = "20"> <img src="..http://img.dovov.comtickmark.gif" border="0" style='text-transform:uppercase'/> 

但是我没有通过使用这个属性得到所需的输出。

Answer 1

您已将style属性放在<img>标签上，而不是<input> 。

在属性名称和值之间使用空格也不是一个好主意…

 <input type="text" class="normal" name="Name" size="20" maxlength="20" style="text-transform:uppercase" /> <img src="..http://img.dovov.comtickmark.gif" border="0" /> 

请注意，这种转换纯粹是可视化的，不会更改POST中发送的文本。

Answer 2

上面给出的解决scheme在发布数据时被破坏。 相反，你可以做这样的事情;

对于你input的HTML使用onkeydown;

 <input name="yourInput" onkeydown="upperCaseF(this)"/> 

在你的javascript;

 function upperCaseF(a){ setTimeout(function(){ a.value = a.value.toUpperCase(); }, 1); } 

使用每个按键上的upperCaseF()函数，input的值将变成大写forms。

我也放了一个1ms的延迟，以便在发生keydown事件之后触发function代码块。

Answer 3

尝试

 <input type = "text" class = "normal" style='text-transform:uppercase' name = "Name" size = "20" maxlength = "20"> <img src="..http://img.dovov.comtickmark.gif" border="0"/> 

而不是把图像放在input样式标签，因为你正在input而不是图像上写

Answer 4

第一个问题是占位符也是大写的。 如果你只要input大写，使用下面的解决scheme。

为了仅select非空的input元素，在元素上放置必需的属性：

 <input type="text" id="name-input" placeholder="Enter symbol" required="required" /> 

现在，为了select它，使用:valid伪元素：

 #name-input:valid { text-transform: uppercase; } 

这样你将只input大写字母。

Answer 5

设置以下样式将所有文本框设置为大写

 input {text-transform: uppercase;}