Javascript 如何在输入时将输入更改为大写
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3724972/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to change the input to uppercase as it is being typed
提问by Achaius
I am using onkeyup="this.value=this.value.toUpperCase();"to change input text value in uppercase. This is working but my need is to change a single letter in input box without using mouse event. If i use left arrow key to move cursor backward onkeyup event gets triggered and the cursor moves to end. How do I modify this script, so that I can navigate backward using arrow keys and modify a text somewhere in between
我正在使用onkeyup="this.value=this.value.toUpperCase();"大写更改输入文本值。这是有效的，但我需要的是在不使用鼠标事件的情况下更改输入框中的单个字母。如果我使用左箭头键向后移动光标，onkeyup 事件被触发并且光标移动到结尾。如何修改此脚本，以便我可以使用箭头键向后导航并修改介于两者之间的文本
The current code looks like this...
当前代码看起来像这样......
<h:inputText value="#{_input.response}" autocomplete="off" onmouseover="this.focus();" onkeyup="this.value=this.value.toUpperCase();"/>
回答by Darin Dimitrov
How about CSS:
CSS怎么样：
input.upper { text-transform: uppercase; }
Remark: This will still send the value to the server as typed by the user and not uppercased.
备注：这仍会将用户输入的值发送到服务器，而不是大写。
回答by Juan
A sample could be:
样本可以是：
<p:inputText id="nombres"
value="#{userController.user.nombres}"
style="text-transform: uppercase" />
回答by JDT
You could check what key was pressed in the onkeyup and only process for keys a-z. Should be pretty easy since the keycodes are numeric and you could just check if the keycode is between the keycode for a (65) and z (90).
您可以检查在 onkeyup 中按下了什么键，并且只处理键 az。应该很容易，因为键码是数字，您可以检查键码是否在 a (65) 和 z (90) 的键码之间。
回答by jmullee
Like kristoffer says, probably best to use the style, and convert serverside. There's also a jQuery plugin to force uppercase: http://plugins.jquery.com/plugin-tags/uppercase
就像 kristoffer 说的，可能最好使用样式，并转换服务器端。还有一个强制大写的 jQuery 插件：http: //plugins.jquery.com/plugin-tags/uppercase
<html>
<head>
<style>
input.upc { text-transform: uppercase; }
</style>
<script>
// thanks 2 'm2pc' : http://www.webdeveloper.com/forum/showpost.php?s=9f258cba84d461026bb9ed478e86776d&p=423545&postcount=3
function doGetCaretPosition (oField) {
var iCaretPos = 0;
if (document.selection) // IE Support
{
oField.focus ();
var oSel = document.selection.createRange ();
// Move selection start to 0 position
oSel.moveStart ('character', -oField.value.length);
// The caret position is selection length
iCaretPos = oSel.text.length;
}
else
if (oField.selectionStart || oField.selectionStart == '0') // Firefox support
iCaretPos = oField.selectionStart;
return (iCaretPos);
}
function doSetCaretPosition (oField, iCaretPos)
{
if (document.selection) // IE Support
{
oField.focus ();
var oSel = document.selection.createRange ();
oSel.moveStart ('character', -oField.value.length);
oSel.moveStart ('character', iCaretPos);
oSel.moveEnd ('character', 0);
oSel.select ();
}
else
if (oField.selectionStart || oField.selectionStart == '0') // Firefox support
{
oField.selectionStart = iCaretPos;
oField.selectionEnd = iCaretPos;
oField.focus ();
}
}
function forceupper(o)
{
var x = doGetCaretPosition(o);
o.value=o.value.toUpperCase();
doSetCaretPosition(o,x);
}
</script>
</head>
<body>
<form method="get" target="#">
Fld 1 : browser shows upper-case, form submits mixed-case<br>
<input name="f1" id="idf1" class="upc" type="text" value="X"><br>
Fld 2 : javascript updates text to uppercase, form submits uppercase<br>
<input name="f2" id="idf2" class="js" type="text" value="Y" onkeyup="forceupper(this);"><br>
<input type="submit" value="send">
</form>
</body>
</html>
回答by Poorna Rao
bootstrap 3 has transformation classes which transform text in components with text capitalisation classes.
bootstrap 3 具有转换类，可以使用文本大写类转换组件中的文本。
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>
