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

试试看

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

把样式标签放在输入上，而不是放在图像上，因为你写的是输入而不是图像

您已经将 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()" />

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

为了只选择非空的 input 元素，在元素上添加必需的属性:

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

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

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

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

使用 text-transformation:uppercase样式的答案不会在提交时向服务器发送超高音数据——这可能是您所期望的。你可以这样做:

输入 HTML 使用 onkeydown:

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

在你的 JavaScript 中:

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

在每个键上按下 upperCaseF()函数时，输入的值将变成大写形式。

我还添加了1毫秒的延迟，以便函数代码块在发生按键事件后触发。

更新

根据 Dinei 的推荐，你可以使用 oninput 事件代替 onkeydown，并去掉 setTimeout。

对于你的输入 HTML 使用 oninput:

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

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

input { text-transform: uppercase; }

CSS 样式的问题在于它没有改变数据，如果您不想要一个 JS 函数，那么可以尝试..。

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

在它自己你会看到该领域利用键盘，所以它可能是可取的结合这一点与 style='text-transform:uppercase'的其他建议。

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

超文本标示语言

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

JavaScript

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

我认为确保它以大写形式发布的最健壮的解决方案是使用内联的 oninput 方法，比如:

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

EDIT

Some people have been complaining that the cursor jumps to the end when editing the value, so this slightly expanded version should resolve that

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

<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)">

正如没有人建议的那样:

如果您想使用带有小写占位符的 CSS 解决方案，只需分别设置占位符的样式即可。分割两个占位符样式的 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" />

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

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

<input>

Here I am using toLocaleUpperCase() to convert input value to uppercase. It works fine until you need to edit what you had entered, e.g. if you had entered ABCXYZ and now you try to change it to ABCLMNXYZ, it will become ABCLXYZMN because after every input the cursor jumps to the end.

To overcome this jumping of the cursor, we have to make following changes in our function:

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>

Now everything works as expected, but if you have slow PC you may see text jumping from lowercase to uppercase as you type. If this annoys you, this is the time to use CSS, apply input: {text-transform: uppercase;} to CSS file and everything will be fine.

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

我选择了风格文本转换: 从海报大写的东西。然后我在 php 中也做了大写。有些人用 javascript 工作得太辛苦了。

你差点就把这种风格放错地方了。你想把图像大写，而不是输入。

$name = strtoupper($_POST['Name']);

我不知道为什么，如果是一个 PHP 页面，我还要加一些额外的东西。这是我喜欢做的事情，使它更顺利的人填写表格。

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

这是假设您使用 PHP 作为后端，并将其发布到所在的相同页面。这将使用户不必再次填写表单的该部分。这样填表的人就不会那么烦人了。

这里的各种答案都有各种各样的问题，因为我正在努力实现的目标:

仅仅使用文本转换改变外观而不改变数据。 使用 oninput 或 onkeydown 会改变光标的位置，因此，例如，您不能在现有输入的中间单击并编辑它。 保留这个位置是可行的，但是看起来有点笨拙。

我觉得把问题分成两部分比较简单: 一部分是输入时输入的内容(文本转换) ，另一部分是提交的数据(运行到 UpperCase 改变) :

<input id = "thing" onchange="this.value = this.value.toUpperCase(); pr()" style=text-transform:uppercase /><p>
<b><span id="result"></span></b>
<script>function pr() {document.getElementById("result").innerHTML = document.getElementById("thing").value}</script>

在那里输入一些东西，点击返回或者单击输入，然后点击你上一个条目的中间，添加一些 lc 文本，点击返回..。

只要在你的输入栏中使用这个 oninput:

<div class="form-group col-2">
<label>PINCODE</label>
<input type="number" name="pincode" id="pincode" class="form-control" minlength="6" maxlength="6" placeholder="Enter Pincode" oninput="this.value = this.value.toUpperCase()"  autocomplete="off">
</div>

只需添加您的输入(style = “ text-change: uppercase”)

<input type="text" class="normal" style="text-transform:uppercase" name="Name" size="20" maxlength="20">

在 HTML 输入标签只是样式如下

<input type="text" name="clientName" style="text-transform:uppercase" required>

用于支持防腐剂/幼虫的用途:

$name = strtoupper($clientName);