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

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'/>

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

score 318 · Accepted Answer

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

score 100 · Accepted Answer

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

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

编辑

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

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

score 43 · Accepted Answer

带有样式的答案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()"/>

score 19 · Accepted Answer

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

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

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

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

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

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

score 11 · Accepted Answer

尝试

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

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

score 7 · Accepted Answer

7

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

input {text-transform: uppercase;}

于 2016-06-29T06:04:54.930 回答

score 4 · Accepted Answer

使用 CSStext-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 文件，一切都会好起来的。

score 3 · Accepted Answer

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

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

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

score 1 · Accepted Answer

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

HTML

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

JavaScript

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

score 1 · Accepted Answer

正如没有人建议的那样：

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

score 1 · Accepted Answer

<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 作为后端并发布到您所在的同一页面。这将使用户不必再次填写表单的该部分。填写表格的人不那么烦人。

score 1 · Accepted Answer

对于我试图实现的目标，这里的各种答案都有各种问题：

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

score 0 · Accepted Answer

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

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

score -3 · Accepted Answer

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

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

14 回答 14

Related

Reference