blocks|key|2891141|text|试一试|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2891142|<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|2891143|将样式标签放在输入上而不是图像上，因为您是在输入上写入，而不是在图像上写入|2891144|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|2891180|text|您已经将style属性放在了<img>标记上，而不是<input>上。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2891181|在属性名称和值之间使用空格也不是一个好主意……|2891182|<input+type="text"+class="normal"+
+++++++name="Name"+size="20"+maxlength="20"+
+++++++style="text-transform:uppercase"+/>+
<img+src="../images/tickmark.gif"+border="0"+/>|code-block|syntax|javascript|2891183|请注意，此转换是纯可视化的，并且不会更改在POST中发送的文本。|2891184|entityMap^0|4|5|E|5|Q|7|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]|$9|T|A|U|B|C]|$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|X|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|Y|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|Z|8|@]|D|@]|E|$]]|$1|O|3|-4|5|6|7|10|8|@]|D|@]|E|$]]]|P|$]]

<p>You've put the <code>style</code> attribute on the <code>&lt;img&gt;</code> tag, instead of the <code>&lt;input&gt;</code>.</p>

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

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

<p>Please note this transformation is <strong>purely</strong> visual, and does not change the text that is sent in POST.</p>


blocks|key|2891212|text|第一个答案的问题是占位符也是大写的。如果您只希望输入为大写，请使用以下解决方案。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2891213|为了只选择非空的输入元素，将必需的属性放在元素上：|2891214|<input+type="text"+id="name-input"+placeholder="Enter+symbol"+required="required"+/>|code-block|syntax|javascript|2891215|现在，为了选择它，使用:valid伪元素：|offset|length|style|CODE|2891216|#name-input:valid+{+text-transform:+uppercase;+}|2891217|这样，您将只大写输入的字符。|2891218|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|2891244|text|使用text-transformation:uppercase样式的答案不会在提交时将升序数据发送到服务器-这是您可能预期的。你可以这样做：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2891245|对于您的输入HTML，使用onkeydown：|2891246|<input+name="yourInput"+onkeydown="upperCaseF(this)"/>|code-block|syntax|javascript|2891247|在您的JavaScript中：|2891248|function+upperCaseF(a){
++++setTimeout(function(){
++++++++a.value+=+a.value.toUpperCase();
++++},+1);
}|2891249|在每次按下键时使用upperCaseF()函数，输入值将转换为大写形式。|2891250|我还添加了1毫秒的延迟，以便功能代码块在按键事件发生后触发。|2891251|更新|BOLD|2891252|根据Dinei的建议，您可以使用oninput+event而不是onkeydown并摆脱setTimeout。|2891253|对于您的输入HTML，请使用oninput：|2891254|<input+name="yourInput"+oninput="this.value+=+this.value.toUpperCase()"/>|2891255|entityMap^0|2|T|0|0|0|0|0|9|C|0|0|0|2|0|18|A|0|0|0^^$0|@$1|2|3|4|5|6|7|15|8|@$9|16|A|17|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|18|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|19|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|1A|8|@]|D|@]|E|$]]|$1|O|3|P|5|J|7|1B|8|@]|D|@]|E|$K|L]]|$1|Q|3|R|5|6|7|1C|8|@$9|1D|A|1E|B|C]]|D|@]|E|$]]|$1|S|3|T|5|6|7|1F|8|@]|D|@]|E|$]]|$1|U|3|V|5|6|7|1G|8|@$9|1H|A|1I|B|W]]|D|@]|E|$]]|$1|X|3|Y|5|6|7|1J|8|@$9|1K|A|1L|B|C]]|D|@]|E|$]]|$1|Z|3|10|5|6|7|1M|8|@]|D|@]|E|$]]|$1|11|3|12|5|J|7|1N|8|@]|D|@]|E|$K|L]]|$1|13|3|-4|5|6|7|1O|8|@]|D|@]|E|$]]]|14|$]]

<p>The answers with the <code>text-transformation:uppercase</code> styling will not send uppercased data to the server on submit - what you might expect. You can do something like this instead:</p>
<p>For your input HTML use onkeydown:</p>
<pre><code>&lt;input name=&quot;yourInput&quot; onkeydown=&quot;upperCaseF(this)&quot;/&gt;
</code></pre>
<p>In your JavaScript:</p>
<pre><code>function upperCaseF(a){
    setTimeout(function(){
        a.value = a.value.toUpperCase();
    }, 1);
}
</code></pre>
<p>With <code>upperCaseF()</code> function on every key press down, the value of the input is going to turn into its uppercase form.</p>
<p>I also added a 1ms delay so that the function code block triggers after the keydown event occured.</p>
<p><strong>UPDATE</strong></p>
<p>Per recommendation from Dinei, you can use oninput event instead of onkeydown and get rid of <code>setTimeout</code>.</p>
<p>For your input HTML use oninput:</p>
<pre><code>&lt;input name=&quot;yourInput&quot; oninput=&quot;this.value = this.value.toUpperCase()&quot;/&gt;
</code></pre>


blocks|key|2891284|text|设置跟随样式以将所有文本框设置为大写|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2891285|input+{text-transform:+uppercase;}|code-block|syntax|javascript|2891286|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|1255005|text|CSS样式的问题是它不会更改数据，如果您不想使用JS函数，请尝试...|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1255006|<input+onkeyup="this.value+=+this.value.toUpperCase()"+/>|offset|length|style|CODE|1255007|就其本身而言，您将看到该字段在keyup上大写，因此将其与其他人建议的style='text-transform:uppercase'结合起来可能是可取的。|1255008|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|1255028|text|这将以大写形式显示输入，并以大写形式通过post发送输入数据。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1255029|HTML|1255030|<input+type="text"+id="someInput">|code-block|syntax|javascript|1255031|JavaScript|1255032|var+someInput+=+document.querySelector('#someInput');
someInput.addEventListener('input',+function+()+{
++++someInput.value+=+someInput.value.toUpperCase();
});|1255033|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|2979374|text|我认为确保它以大写形式发布的最健壮的解决方案是使用oninput方法内联，比如：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2979375|​|2979376|<input+oninput="this.value+=+this.value.toUpperCase()"+/>|code-block|syntax|javascript|2979377|2979378|编辑|offset|length|style|BOLD|2979379|有些人一直抱怨在编辑值时光标会跳到末尾，所以这个略微扩展的版本应该可以解决这个问题|2979380|2979381|<input+oninput="let+p=this.selectionStart;this.value=this.value.toUpperCase();this.setSelectionRange(p,+p);"+/>|2979382|2979383|entityMap^0|0|0|0|0|0|2|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Y|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Z|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|10|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|11|8|@$L|12|M|13|N|O]]|9|@]|A|$]]|$1|P|3|Q|5|6|7|14|8|@]|9|@]|A|$]]|$1|R|3|C|5|6|7|15|8|@]|9|@]|A|$]]|$1|S|3|T|5|F|7|16|8|@]|9|@]|A|$G|H]]|$1|U|3|C|5|6|7|17|8|@]|9|@]|A|$]]|$1|V|3|-4|5|6|7|18|8|@]|9|@]|A|$]]]|W|$]]

<p>I think the most robust solution that will insure that it is posted in uppercase is to use the oninput method inline like:</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-html lang-html prettyprint-override"><code>&lt;input oninput="this.value = this.value.toUpperCase()" /&gt;</code></pre>
</div>
</div>
</p>

<p><strong>EDIT</strong></p>

<p>Some people have been complaining that the cursor jumps to the end when editing the value, so this slightly expanded version should resolve that</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-html lang-html prettyprint-override"><code>&lt;input oninput="let p=this.selectionStart;this.value=this.value.toUpperCase();this.setSelectionRange(p, p);" /&gt;</code></pre>
</div>
</div>
</p>


blocks|key|2891404|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|2891405|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>


blocks|key|1255134|text|因为没有人建议这样做：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1255135|如果您想使用CSS解决方案的小写占位符，您只需单独设置占位符的样式。拆分两个占位符样式以实现IE兼容性。|1255136|​|1255137|input+{
++++text-transform:+uppercase;
}
input:-ms-input-placeholder+{
++++text-transform:+none;
}
input::placeholder+{
++++text-transform:+none;
}|code-block|syntax|javascript|1255138|The+below+input+has+lowercase+characters,+but+all+typed+characters+are+CSS-uppercased+:<br/>
<input+type="text"+placeholder="ex+:+ABC"+/>|1255139|1255140|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|2891452|text|尝试下面的解决方案，当用户在第一个索引处的输入字段中只输入空格时，也会注意这一点。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2891453|​|2891454|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|2891455|<input+type="text"+id="capitalizeInput"+autocomplete="off"+/>|2891456|2891457|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|2891529|text|使用CSS+text-transform:+uppercase不会改变实际的输入，只会改变它的外观。如果您将输入数据发送到服务器，它仍然是小写的，或者无论您输入的是什么。要真正转换输入值，您需要添加javascript代码，如下所示：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2891530|​|2891531|document.querySelector("input").addEventListener("input",+function(event)+{
++event.target.value+=+event.target.value.toLocaleUpperCase()
})|code-block|syntax|javascript|2891532|<input>|2891533|2891534|在这里，我使用toLocaleUpperCase()将input值转换为大写。它工作得很好，直到您需要编辑您输入的内容，例如，如果您已经输入ABCXYZ，现在您尝试将其更改为ABCLMNXYZ，它将变为ABCLXYZMN，因为每次输入后，光标都会跳到末尾。|2891535|为了克服光标的这种跳跃，我们必须在函数中进行以下更改：|2891536|2891537|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);
})|2891538|2891539|2891540|现在一切都像预期的那样工作，但是如果你的电脑速度很慢，你可能会看到文本在你输入时从小写跳到大写。如果这让你恼火，这是使用CSS的时候了，将input:+{text-transform:+uppercase;}应用到CSS文件中，一切都会好起来的。|2891541|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|2979598|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|2979599|我选择了样式text-transform:来自poster的大写字母。然后我在php中也做了大写的事情。有些人在使用这个javascript时太努力了。|unstyled|2979600|你的风格出现在了错误的地方。您正在尝试将图像大写，而不是输入。|2979601|$name+=+strtoupper($_POST['Name']);|2979602|如果这是一个php页面，我不知道为什么我要添加一些额外的东西。这是我喜欢做的事情，让填写表单的人更顺畅。|2979603|<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"/>|2979604|这是假设您使用PHP作为后端，并发布到您所在的同一个页面。这将使用户不必再次填写表单的该部分。对填写表单的人来说不那么烦人。|2979605|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|1255334|text|这里的不同答案都有不同的问题，这是我想要实现的：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1255335|仅使用文本转换可以更改外观，但不会更改数据。使用oninput或onkeydown会更改光标位置，因此，例如，您不能在现有输入的中间单击并编辑它。保住这个位置是可行的，但看起来有点笨拙。|1255336|对我来说，将问题分成两部分会更清晰:大写输入(文本转换)和大写提交的数据(运行toUpperCase+onchange)：|1255337|​|1255338|<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>|code-block|syntax|javascript|1255339|1255340|在其中输入一些内容，按回车键或单击输入内容，然后在之前输入的条目中间单击，添加一些密文，按回车键……|1255341|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|T|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|U|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|V|8|@]|9|@]|A|$K|L]]|$1|M|3|G|5|6|7|W|8|@]|9|@]|A|$]]|$1|N|3|O|5|6|7|X|8|@]|9|@]|A|$]]|$1|P|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|Q|$]]

<p>Various answers here have various problems, for what I was trying to achieve:</p>
<p>Just using text-transform changes the appearance but not the data.
Using oninput or onkeydown changes the cursor position, so you can't, for instance, click in the middle of your existing input and edit it.
Saving the position works, but just seemed a bit kludgey.</p>
<p>It felt cleaner to me to just break the problem up into two parts: upper-casing what I'm typing while I type (text-transform), and upper-casing the submitted data (run toUpperCase <em>onchange</em>):</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-html lang-html prettyprint-override"><code>&lt;input id = "thing" onchange="this.value = this.value.toUpperCase(); pr()" style=text-transform:uppercase /&gt;&lt;p&gt;
&lt;b&gt;&lt;span id="result"&gt;&lt;/span&gt;&lt;/b&gt;
&lt;script&gt;function pr() {document.getElementById("result").innerHTML = document.getElementById("thing").value}&lt;/script&gt;</code></pre>
</div>
</div>
</p>
<p>Type something in that, hit return or click out of the input, then click in the middle of your previous entry, add some lc text, hit return...</p>


<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?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

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

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

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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