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

Question

我正在使用以下样式属性将用户输入设置为大写，以便当用户开始在文本框中键入例如 railway 时，应将其更改为大写字母，例如 RAILWAY 用户无需按大写锁定按钮。

这是我用于输入的代码：

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

但是我没有通过使用此属性获得所需的输出。

原文由 ybc126 发布，翻译遵循 CC BY-SA 4.0 许可协议

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 中发送的文本。

注意： 如果要将 实际输入值 设置为大写，并保证表单提交的文本为大写，可以使用如下代码：

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

原文由 freefaller 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我认为确保以大写形式发布的最可靠的解决方案是使用内联的 oninput 方法，例如：

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

编辑

一直有人抱怨编辑值时光标跳到末尾，所以这个稍微扩展的版本应该可以解决这个问题

 <input oninput="let p=this.selectionStart;this.value=this.value.toUpperCase();this.setSelectionRange(p, p);" />

原文由 Yehuda Schwartz 发布，翻译遵循 CC BY-SA 4.0 许可协议