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

【问题标题】：How do you automatically set text box to Uppercase?你如何自动将文本框设置为大写？
【发布时间】：2012-06-21 10:30:17
【问题描述】：

我正在使用以下样式属性将用户输入设置为大写，这样当用户开始在文本框中输入时，例如railway，那么它应该被更改为大写字母，例如RAILWAY，而用户没有按下大写锁定按钮。

这是我用于输入的代码：

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

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

【问题讨论】：

如下所述，注意 = 和值 "text" 之间有空格

标签： html

【解决方案1】：

试试

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

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

【讨论】：

不过，这也会使占位符文本大写。

【解决方案2】：

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

【讨论】：

请注意，如果您通过 POST 发送此数据，它将以您输入的方式发送，而不是在屏幕上显示的方式。
@freefaller ,它把所有输入都改成大写但插入mysql是小写文本，如何更改大写字母！
@David，请参阅上一条评论。变换是纯粹视觉的。它不会更改发送回服务器的基础文本的大小写。如果要将文本保存为大写，则必须在保存之前在服务器上对其进行转换
这不是一个完整的解决方案，因为占位符现在是大写的（在大多数情况下不应该是）。除了使用 JavaScript，别无他法。
未来的读者希望根据价值而不是纯粹的视觉进行更改，请参阅Burak Tokak's answer。

【解决方案3】：

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

为了只选择非空输入元素，在元素上加上 required 属性：

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

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

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

这样你将只输入大写字符。

【讨论】：

这个答案不起作用，也没有意义。为什么仅当输入有效时选择才会影响输入文本而不影响占位符？我想如果空白不是有效值，那么这可能是偶然的。我在这里使用了答案：stackoverflow.com/questions/25180140/…
我的解决方案仅适用于所需的文本输入字段。如果你试图概括它，它是行不通的。它回答了上面的问题。您可能问的是不同的问题。
这是一个非常有用的解决方案，正是我所需要的。它并不适合所有情况，因为它取决于所需的字段，但在工具箱中绝对很方便！

【解决方案4】：

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

更新

根据 Dinei 的建议，您可以使用 oninput 事件而不是 onkeydown 并摆脱 setTimeout。

对于您的输入 HTML，请使用 oninput：

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

【讨论】：

可以使用the input event 代替keydown 并摆脱setTimeout 解决方法。
这行得通，但是你如何避免丑陋的瞬间小写到大写跳转？
按照“输入事件”的想法，将此属性添加到input 元素似乎效果很好：oninput="this.value = this.value.toUpperCase()"
@JonathanSafa 除了上面的text-transform:uppercase css 样式解决方案之外，还使用这个来使输入始终显示为大写
当用户编辑现有文本并将光标放在末尾以外的位置时，光标将随着输入的每个字符跳到末尾。有没有办法保留光标位置以及将文本转换为大写？

【解决方案5】：

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

input {text-transform: uppercase;}

【讨论】：

【解决方案6】：

CSS Styling 的问题在于它不会改变数据，如果你不想拥有 JS 函数，那就试试吧……

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

就其本身而言，您会看到该字段利用 keyup，因此可能需要将其与其他人建议的 style='text-transform:uppercase' 结合使用。

【讨论】：

【解决方案7】：

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

HTML

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

JavaScript

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

【讨论】：

【解决方案8】：

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

&lt;input oninput="this.value = this.value.toUpperCase()" /&gt;

编辑

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

&lt;input oninput="let p=this.selectionStart;this.value=this.value.toUpperCase();this.setSelectionRange(p, p);" /&gt;

【讨论】：

你太棒了

【解决方案9】：

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

【讨论】：

这个答案与所有已经给出的答案有什么区别？

【解决方案10】：

正如没有人建议的那样：

如果您想使用带有小写占位符的 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" />

【讨论】：

【解决方案11】：

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

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;
});

&lt;input type="text" id="capitalizeInput" autocomplete="off" /&gt;

【讨论】：

【解决方案12】：

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

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

&lt;input&gt;

这里我使用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);
})

&lt;input&gt;

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

【讨论】：

【解决方案13】：

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

我选择了海报中的 text-transform:uppercase 样式。然后我也只是在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 作为后端并发布到您所在的同一页面。这将使用户不必再次填写表单的该部分。对填写表格的人来说不那么烦人了。

【讨论】：

【解决方案14】：

对于我想要达到的目标，这里的各种答案都有各种问题：

仅使用 text-transform 会更改外观，但不会更改数据。使用 oninput 或 onkeydown 会更改光标位置，例如，您不能在现有输入的中间单击并对其进行编辑。保存位置有效，但似乎有点笨拙。

将问题分成两部分对我来说感觉更简洁：在我输入时将我输入的内容大写（文本转换），以及将提交的数据大写（运行 toUpperCase onchange):

<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 文本，按回车键...

【讨论】：