blocks|key|324670|text|第一个答案的问题是占位符也是大写的。如果您只希望输入为大写，请使用以下解决方案。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|324671|为了只选择非空的输入元素，将必需的属性放在元素上：|324672|<input+type="text"+id="name-input"+placeholder="Enter+symbol"+required="required"+/>|code-block|syntax|javascript|324673|现在，为了选择它，使用:valid伪元素：|offset|length|style|CODE|324674|#name-input:valid+{+text-transform:+uppercase;+}|324675|这样，您将只大写输入的字符。|324676|entityMap^0|0|0|0|B|6|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|X|8|@$K|Y|L|Z|M|N]]|9|@]|A|$]]|$1|O|3|P|5|F|7|10|8|@]|9|@]|A|$G|H]]|$1|Q|3|R|5|6|7|11|8|@]|9|@]|A|$]]|$1|S|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|T|$]]

<p>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.</p>

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

<pre><code>&lt;input type="text" id="name-input" placeholder="Enter symbol" required="required" /&gt;
</code></pre>

<p>Now, in order to select it, use the <code>:valid</code> pseudo-element:</p>

<pre><code>#name-input:valid { text-transform: uppercase; }
</code></pre>

<p>This way you will uppercase only entered characters.</p>


blocks|key|324637|text|试一试|type|unstyled|depth|inlineStyleRanges|entityRanges|data|324638|<input+type="text"+class="normal"+
+++++++style="text-transform:uppercase"+
+++++++name="Name"+size="20"+maxlength="20">+
+<img+src="../images/tickmark.gif"+border="0"/>|code-block|syntax|javascript|324639|将样式标签放在输入上而不是图像上，因为您是在输入上写入，而不是在图像上写入|324640|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>try</p>

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

<p>Instead of image put style tag on input because you are writing on input not on image</p>


blocks|key|541707|text|设置跟随样式以将所有文本框设置为大写|type|unstyled|depth|inlineStyleRanges|entityRanges|data|541708|input+{text-transform:+uppercase;}|code-block|syntax|javascript|541709|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Set following style to set all textbox to uppercase</p>

<pre><code>input {text-transform: uppercase;}
</code></pre>


blocks|key|542045|text|使用CSS+text-transform:+uppercase不会改变实际的输入，只会改变它的外观。如果您将输入数据发送到服务器，它仍然是小写的，或者无论您输入的是什么。要真正转换输入值，您需要添加javascript代码，如下所示：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|542046|​|542047|document.querySelector("input").addEventListener("input",+function(event)+{
++event.target.value+=+event.target.value.toLocaleUpperCase()
})|code-block|syntax|javascript|542048|<input>|542049|542050|在这里，我使用toLocaleUpperCase()将input值转换为大写。它工作得很好，直到您需要编辑您输入的内容，例如，如果您已经输入ABCXYZ，现在您尝试将其更改为ABCLMNXYZ，它将变为ABCLXYZMN，因为每次输入后，光标都会跳到末尾。|542051|为了克服光标的这种跳跃，我们必须在函数中进行以下更改：|542052|542053|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);
})|542054|542055|542056|现在一切都像预期的那样工作，但是如果你的电脑速度很慢，你可能会看到文本在你输入时从小写跳到大写。如果这让你恼火，这是使用CSS的时候了，将input:+{text-transform:+uppercase;}应用到CSS文件中，一切都会好起来的。|542057|entityMap^0|6|P|0|0|0|0|0|7|J|R|5|0|0|0|0|0|0|1X|Z|0^^$0|@$1|2|3|4|5|6|7|12|8|@$9|13|A|14|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|15|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|16|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|17|8|@]|D|@]|E|$K|L]]|$1|O|3|G|5|6|7|18|8|@]|D|@]|E|$]]|$1|P|3|Q|5|6|7|19|8|@$9|1A|A|1B|B|C]|$9|1C|A|1D|B|C]]|D|@]|E|$]]|$1|R|3|S|5|6|7|1E|8|@]|D|@]|E|$]]|$1|T|3|G|5|6|7|1F|8|@]|D|@]|E|$]]|$1|U|3|V|5|J|7|1G|8|@]|D|@]|E|$K|L]]|$1|W|3|N|5|J|7|1H|8|@]|D|@]|E|$K|L]]|$1|X|3|G|5|6|7|1I|8|@]|D|@]|E|$]]|$1|Y|3|Z|5|6|7|1J|8|@$9|1K|A|1L|B|C]]|D|@]|E|$]]|$1|10|3|-4|5|6|7|1M|8|@]|D|@]|E|$]]]|11|$]]

<p>Using CSS <code>text-transform: uppercase</code> does 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:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>document.querySelector("input").addEventListener("input", function(event) {
  event.target.value = event.target.value.toLocaleUpperCase()
})</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input&gt;</code></pre>
</div>
</div>
</p>

<p>Here I am using <code>toLocaleUpperCase()</code> to convert <code>input</code> 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.</p>

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

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>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);
})</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input&gt;</code></pre>
</div>
</div>
</p>

<p>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 <code>input: {text-transform: uppercase;}</code> to CSS file and everything will be fine.</p>


blocks|key|541775|text|CSS样式的问题是它不会更改数据，如果您不想使用JS函数，请尝试...|type|unstyled|depth|inlineStyleRanges|entityRanges|data|541776|<input+onkeyup="this.value+=+this.value.toUpperCase()"+/>|offset|length|style|CODE|541777|就其本身而言，您将看到该字段在keyup上大写，因此将其与其他人建议的style='text-transform:uppercase'结合起来可能是可取的。|541778|entityMap^0|0|0|1L|0|Z|W|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@$D|N|E|O|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|P|8|@$D|Q|E|R|F|G]]|9|@]|A|$]]|$1|J|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|K|$]]

<p>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...</p>

<p><code>&lt;input onkeyup="this.value = this.value.toUpperCase()" /&gt;</code></p>

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


blocks|key|324755|text|这将以大写形式显示输入，并以大写形式通过post发送输入数据。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|324756|HTML|324757|<input+type="text"+id="someInput">|code-block|syntax|javascript|324758|JavaScript|324759|var+someInput+=+document.querySelector('#someInput');
someInput.addEventListener('input',+function+()+{
++++someInput.value+=+someInput.value.toUpperCase();
});|324760|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>This will both show the input in uppercase and send the input data through post in uppercase.</p>

<p>HTML</p>

<pre><code>&lt;input type="text" id="someInput"&gt;
</code></pre>

<p>JavaScript</p>

<pre><code>var someInput = document.querySelector('#someInput');
someInput.addEventListener('input', function () {
    someInput.value = someInput.value.toUpperCase();
});
</code></pre>


blocks|key|324821|text|因为没有人建议这样做：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|324822|如果您想使用CSS解决方案的小写占位符，您只需单独设置占位符的样式。拆分两个占位符样式以实现IE兼容性。|324823|​|324824|input+{
++++text-transform:+uppercase;
}
input:-ms-input-placeholder+{
++++text-transform:+none;
}
input::placeholder+{
++++text-transform:+none;
}|code-block|syntax|javascript|324825|The+below+input+has+lowercase+characters,+but+all+typed+characters+are+CSS-uppercased+:<br/>
<input+type="text"+placeholder="ex+:+ABC"+/>|324826|324827|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|R|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|S|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|H|7|T|8|@]|9|@]|A|$I|J]]|$1|M|3|E|5|6|7|U|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|O|$]]

<p>As nobody suggested it:</p>

<p>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.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>input {
    text-transform: uppercase;
}
input:-ms-input-placeholder {
    text-transform: none;
}
input::placeholder {
    text-transform: none;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>The below input has lowercase characters, but all typed characters are CSS-uppercased :&lt;br/&gt;
&lt;input type="text" placeholder="ex : ABC" /&gt;</code></pre>
</div>
</div>
</p>


blocks|key|324908|text|尝试下面的解决方案，当用户在第一个索引处的输入字段中只输入空格时，也会注意这一点。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|324909|​|324910|document.getElementById('capitalizeInput').addEventListener("keyup",+++()+=>+{
++var+inputValue+=+document.getElementById('capitalizeInput')['value'];+
++if+(inputValue[0]+===+'+')+{
++++++inputValue+=+'';
++++}+else+if+(inputValue)+{
++++++inputValue+=+inputValue[0].toUpperCase()+%2B+inputValue.slice(1);
++++}
document.getElementById('capitalizeInput')['value']+=+inputValue;
});|code-block|syntax|javascript|324911|<input+type="text"+id="capitalizeInput"+autocomplete="off"+/>|324912|324913|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p>Try below solution, This will also take care when a user enters only blank space in the input field at the first index.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>document.getElementById('capitalizeInput').addEventListener("keyup",   () =&gt; {
  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;
});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type="text" id="capitalizeInput" autocomplete="off" /&gt;</code></pre>
</div>
</div>
</p>


blocks|key|542133|text|<input+style="text-transform:uppercase"+type+=+"text"+class+=+"normal"+name+=+"Name"+size+=+"20"+maxlength+=+"20">+<img+src="../images/tickmark.gif"+border="0"/>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|542134|我选择了样式text-transform:来自poster的大写字母。然后我在php中也做了大写的事情。有些人在使用这个javascript时太努力了。|unstyled|542135|你的风格出现在了错误的地方。您正在尝试将图像大写，而不是输入。|542136|$name+=+strtoupper($_POST['Name']);|542137|如果这是一个php页面，我不知道为什么我要添加一些额外的东西。这是我喜欢做的事情，让填写表单的人更顺畅。|542138|<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"/>|542139|这是假设您使用PHP作为后端，并发布到您所在的同一个页面。这将使用户不必再次填写表单的该部分。对填写表单的人来说不那么烦人。|542140|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|T|8|@]|9|@]|A|$]]|$1|G|3|H|5|F|7|U|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|V|8|@]|9|@]|A|$B|C]]|$1|K|3|L|5|F|7|W|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|X|8|@]|9|@]|A|$B|C]]|$1|O|3|P|5|F|7|Y|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|F|7|Z|8|@]|9|@]|A|$]]]|R|$]]

<pre><code>&lt;input style=&quot;text-transform:uppercase&quot; type = &quot;text&quot; class = &quot;normal&quot; name = &quot;Name&quot; size = &quot;20&quot; maxlength = &quot;20&quot;&gt; &lt;img src=&quot;../images/tickmark.gif&quot; border=&quot;0&quot;/&gt;
</code></pre>
<p>I went with the style text-transform:uppercase thing from poster. Then I just did the uppercase thing in php as well. Some people working too hard with that javascript.</p>
<p>You were close with the style being in the wrong place. You were trying to uppercase an image instead of the input.</p>
<pre><code>$name = strtoupper($_POST['Name']);
</code></pre>
<p>I don't know why I wanted to throw in some extra stuff if it's a php page. This is something I like to do make it smoother for the person filling out the form.</p>
<pre><code>&lt;input style=&quot;text-transform:uppercase&quot; type = &quot;text&quot; class = &quot;normal&quot; name = &quot;Name&quot; size = &quot;20&quot; maxlength = &quot;20&quot; value=&quot;&lt;?php echo $name; ?&gt;&quot;&gt; &lt;img src=&quot;../images/tickmark.gif&quot; border=&quot;0&quot;/&gt;
</code></pre>
<p>That's assuming you're using PHP as the backend and posting to the same page you are on. This will keep the user from having to fill out that part of the form again. Less annoying for the person filling out the form.</p>


blocks|key|541797|text|<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)">|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|541798|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

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

&lt;input type="text" required="" name="partno" class="form-control" placeholder="Enter a Part No*" onkeydown="upperCaseF(this)"&gt;
</code></pre>


<p>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 <code>railway</code>, then it should be  altered to capital letters like <code>RAILWAY</code>  without the user having to press the Caps-lock button.</p>

<p>This is the code I am using for the input:</p>

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

<p>But I am not getting the desired output by using this attribute.</p>


How do you automatically set text box to Uppercase?

服务器

我使用以下样式属性将用户输入设置为大写，这样当用户开始在文本框中输入时，例如railway，它应该被更改为大写字母，如RAILWAY，而用户不必按下Caps-lock按钮。这是我用于输入的代码：<input type = "text" class = "normal" name = "Name" size = "20" maxlength = "20"> <img src="../images/t

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

回答 10

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 10

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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