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

Question

我使用以下样式属性将用户输入设置为大写,以便当用户开始在文本框中键入时railway,应该将其更改为大写字母,RAILWAY 而无需用户按下Caps-lock按钮.

这是我用于输入的代码:

<input type = "text" class = "normal" name = "Name" size = "20" maxlength = "20"> <img src="../images/tickmark.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="../images/tickmark.gif" border="0" />

请注意,此转换纯粹是可视化的,并不会更改POST中发送的文本.

Answer 2

我认为确保以大写形式发布的最强大的解决方案是使用oninput方法内联,如:

<input oninput="this.value = this.value.toUpperCase()" />

Answer 3

text-transformation:uppercase样式的答案不会在提交时将大写数据发送到服务器 - 您可能会期望什么.你可以这样做:

对于您的输入HTML使用onkeydown:

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

在您的JavaScript中:

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

随着upperCaseF()对每个键按下功能,输入的值会变成它的大写形式.

我还添加了1ms的延迟,以便在发生keydown事件后触发功能代码块.

Answer 4

第一个答案的问题是占位符也是大写的.如果您只想将输入设置为大写,请使用以下解决方案.

为了只选择非空的输入元素,在元素上放置必需的属性:

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

现在,为了选择它,使用:valid伪元素:

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

这样,您将只输入大写的字符.

Answer 5

尝试

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

而不是图像将样式标记放在输入上,因为您在输入上而不是在图像上写入

Answer 6

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

input {text-transform: uppercase;}