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

How do you automatically set text box to Uppercase?

提问by ybc126

I am using the following style attribute to set the user input to uppercase so that when the user starts typing in the text box for example railway, then it should be altered to capital letters like RAILWAYwithout the user having to press the Caps-lock button.

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

This is the code I am using for the input:

这是我用于输入的代码：

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

But I am not getting the desired output by using this attribute.

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

回答by freefaller

You've put the styleattribute on the <img>tag, instead of the <input>.

您已将style属性放在<img>标签上，而不是<input>.

It is also not a good idea to have the spaces between the attribute name and the value...

在属性名称和值之间留有空格也不是一个好主意......

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

Please note this transformation is purelyvisual, and does not change the text that is sent in POST.

请注意，此转换纯粹是可视化的，不会更改 POST 中发送的文本。

回答by Yehuda Schwartz

I think the most robust solution that will insure that it is posted in uppercase is to use the oninput method inline like:

我认为确保它以大写形式发布的最强大的解决方案是使用内联的 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);" />

回答by Burak Tokak

The answers with the text-transformation:uppercasestyling will not send uppercased data to the server on submit - what you might expect. You can do something like this instead:

text-transformation:uppercase样式的答案不会在提交时将大写数据发送到服务器 - 您可能会期望。你可以这样做：

For your input HTML use onkeydown:

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

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

In your JavaScript:

在你的 JavaScript 中：

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

With upperCaseF()function on every key press down, the value of the input is going to turn into its uppercase form.

随着upperCaseF()每次按键按下的功能，输入的值将变成大写形式。

I also added a 1ms delay so that the function code block triggers after the keydown event occured.

我还添加了 1ms 延迟，以便在 keydown 事件发生后触发功能代码块。

回答by tomericco

The problem with the first answer is that the placeholder will be uppercase too. In case you want ONLY the input to be uppercase, use the following solution.

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

In order to select only non-empty input element, put required attribute on the element:

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

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

Now, in order to select it, use the :validpseudo-element:

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

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

This way you will uppercase only entered characters.

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

回答by tomericco

try

尝试

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

Instead of image put style tag on input because you are writing on input not on image

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

回答by Mukund

Set following style to set all textbox to uppercase

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

input {text-transform: uppercase;}

回答by user3094755

The issue with CSS Styling is that it's not changing the data, and if you don't want to have a JS function then try...

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

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

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

on it's own you'll see the field capitalise on keyup, so it might be desirable to combine this with the style='text-transform:uppercase'others have suggested.

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

回答by Gaurish Gangwar

Using CSS text-transform: uppercasedoes not change the actual input but only changes its look. If you send the input data to a server it is still going to lowercase or however you entered it. To actually transform the input value you need to add javascript code as below:

使用 CSStext-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 inputvalue 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.

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

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.

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

回答by Shateel Ahmed

This will both show the input in uppercase and send the input data through post in uppercase.

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

HTML

HTML

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

JavaScript

JavaScript

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

回答by LePatay

As nobody suggested it:

正如没有人建议的那样：

If you want to use the CSS solution with lowercase placeholders, you just have to style the placeholders separately. Split the 2 placeholder styles for IE compatibility.

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