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

我正在使用以下样式属性将用户输入设置为大写，以便例如在用户开始在文本框中输入内容时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'/>

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

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

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

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

编辑

有人抱怨在编辑值时光标会跳到末尾，因此这个稍稍扩展的版本应该可以解决

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

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事件后触发功能代码块。

第一个答案的问题是占位符也将是大写的。如果只希望输入为大写，请使用以下解决方案。

为了仅选择非空输入元素，请在元素上放置required属性：

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

现在，为了选择它，请使用:valid伪元素：

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

这样，您将只大写输入的字符。

尝试

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

而不是图像在输入上放置样式标签，因为您是在输入上而不是在图像上书写

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

input {text-transform: uppercase;}

CSS样式的问题是它没有更改数据，如果您不想拥有JS函数，请尝试...

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

单独来看，您会看到该领域利用了keyup，因此可能需要将其与style='text-transform:uppercase'其他建议结合使用。

使用CSS text-transform: uppercase不会更改实际输入，而只会更改其外观。如果您将输入数据发送到服务器，则它仍将小写或输入。要实际转换输入值，您需要添加如下的javascript代码：

document.querySelector("input").addEventListener("input", function(event) {
  event.target.value = event.target.value.toLocaleUpperCase()
})

<input>

在这里我toLocaleUpperCase()用来转换input值为大写。它可以正常工作，直到您需要编辑输入的内容为止，例如，如果您输入了ABCXYZ，现在尝试将其更改为ABCLMNXYZ，它将变为ABCLXYZMN，因为在每次输入后，光标会跳到末尾。

为了克服光标的这种跳跃，我们必须对函数进行以下更改：

document.querySelector("input").addEventListener("input", function(event) {
  var input = event.target;
  var start = input.selectionStart;
  var end = input.selectionEnd;
  input.value = input.value.toLocaleUpperCase();
  input.setSelectionRange(start, end);
})

<input>

现在一切正常，但是如果您的PC速度较慢，您键入时可能会看到文本从小写字母跳到大写字母。如果这让您感到烦恼，那么现在是时候使用CSS了，将其应用于input: {text-transform: uppercase;}CSS文件，一切都会好起来的。

这将以大写形式显示输入，并以大写形式通过post发送输入数据。

的HTML

<input type="text" id="someInput">

的JavaScript

var someInput = document.querySelector('#someInput');
someInput.addEventListener('input', function () {
    someInput.value = someInput.value.toUpperCase();
});

正如没有人建议的那样：

如果要将CSS解决方案与小写占位符一起使用，则只需要分别设置占位符的样式即可。拆分2个占位符样式以实现IE兼容性。

input {
    text-transform: uppercase;
}
input:-ms-input-placeholder {
    text-transform: none;
}
input::placeholder {
    text-transform: none;
}

The below input has lowercase characters, but all typed characters are CSS-uppercased :<br/>
<input type="text" placeholder="ex : ABC" />

尝试以下解决方案，当用户仅在第一个索引的输入字段中输入空格时，这也将引起注意。

document.getElementById('capitalizeInput').addEventListener("keyup",   () => {
  var inputValue = document.getElementById('capitalizeInput')['value']; 
  if (inputValue[0] === ' ') {
      inputValue = '';
    } else if (inputValue) {
      inputValue = inputValue[0].toUpperCase() + inputValue.slice(1);
    }
document.getElementById('capitalizeInput')['value'] = inputValue;
});

<input type="text" id="capitalizeInput" autocomplete="off" />

<script type="text/javascript">
    function upperCaseF(a){
    setTimeout(function(){
        a.value = a.value.toUpperCase();
    }, 1);
}
</script>

<input type="text" required="" name="partno" class="form-control" placeholder="Enter a Part No*" onkeydown="upperCaseF(this)">