Javascript 如何使用“keyup”事件将小写字符更改为大写？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7717099/
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 lowercase chars to uppercase using the 'keyup' event?
提问by Jennifer Anthony
回答by Naftali aka Neal
Plain ol' javascript:
普通的 ol' javascript：
var input = document.getElementById('inputID');
input.onkeyup = function(){
this.value = this.value.toUpperCase();
}
Javascript with jQuery:
带有 jQuery 的 JavaScript：
$('#inputID').keyup(function(){
this.value = this.value.toUpperCase();
});
回答by Conan
The only issue with changing user input on the fly like this is how disconcerting it can look to the end user (they'll briefly see the lowercase chars jump to uppercase).
像这样动态更改用户输入的唯一问题是它对最终用户来说是多么令人不安（他们会短暂地看到小写字符跳转到大写）。
What you may want to consider instead is applying the following CSS style to the input field:
您可能需要考虑的是将以下 CSS 样式应用于输入字段：
text-transform: uppercase;
That way, any text entered always appears in uppercase. The only drawback is that this is a purely visual change - the value of the input control (when viewed in the code behind) will retain the case as it was originally entered.
这样，输入的任何文本始终以大写形式显示。唯一的缺点是，这是一个纯粹的视觉变化——输入控件的值（在后面的代码中查看时）将保留最初输入时的大小写。
Simple to get around this though, force the input val() .toUpperCase(); then you've got the best of both worlds.
简单地解决这个问题，强制输入 val() .toUpperCase(); 那么你就拥有了两全其美的优势。
回答by JConstantine
$(document).ready(function()
{
$('#yourtext').keyup(function()
{
$(this).val($(this).val().toUpperCase());
});
});
<textarea id="yourtext" rows="5" cols="20"></textarea>
回答by Ariful Islam
Let say your html code is :
假设您的 html 代码是：
<input type="text" id="txtMyText" />
then the jquery should be :
那么jquery应该是：
$('#txtMyText').keyup(function() {
this.value = this.value.toUpperCase();
});
回答by Dustin Graham
As placeholder text is becoming more commonly supported, this update may be relevant.
随着占位符文本越来越受支持，此更新可能具有相关性。
My issue with the other answers is that applying the text-transform: uppercasecss would also uppercase the placeholder text, which we didn't want.
我对其他答案的问题是应用text-transform: uppercasecss 也会大写占位符文本，这是我们不想要的。
To work around this, it was a little tricky but worth the net effect.
为了解决这个问题，这有点棘手，但值得净效果。
Create the text-uppercase class.
.text-uppercase { text-transform:uppercase; }Bind to the keydownevent.
Binding to the keydown event was important to get the class to be added before the character was visible. Binding to keypress or keyup left the brief flicker of the lowercase letter.
$('input').on('keydown', function(e) { // Visually Friendly Auto-Uppercase var $this = $(this); // 1. Length of 1, hitting backspace, remove class. if ($this.val().length == 1 && e.which == 8) { $this.removeClass('text-uppercase'); } // 2. Length of 0, hitting character, add class. if ($this.val().length == 0 && e.which >= 65 && e.which <= 90) { $this.addClass('text-uppercase'); } });Transform to uppercase when submitting to server.
var myValue = this.value.toUpperCase();
创建文本大写类。
.text-uppercase { text-transform:uppercase; }绑定到keydown事件。
绑定到 keydown 事件对于在角色可见之前添加类很重要。绑定到 keypress 或 keyup 会留下小写字母的短暂闪烁。
$('input').on('keydown', function(e) { // Visually Friendly Auto-Uppercase var $this = $(this); // 1. Length of 1, hitting backspace, remove class. if ($this.val().length == 1 && e.which == 8) { $this.removeClass('text-uppercase'); } // 2. Length of 0, hitting character, add class. if ($this.val().length == 0 && e.which >= 65 && e.which <= 90) { $this.addClass('text-uppercase'); } });提交到服务器时转换为大写。
var myValue = this.value.toUpperCase();
YMMV, you may find that cutting text or deleting text with the delete key may not remove the class. You can modify the keydown to also take the delete character into account.
YMMV，您可能会发现使用删除键剪切文本或删除文本可能不会删除该类。您可以修改 keydown 以将删除字符也考虑在内。
Also, if you only have one character, and your current cursor position is in position 0, hitting backspace will remove the text-transform class, but since the cursor position is in position 0, it doesn't delete the single character.
此外，如果您只有一个字符，而您当前的光标位置在位置 0，按退格键将删除 text-transform 类，但由于光标位置在位置 0，它不会删除单个字符。
This would require a bit more work to also check the current character position and determine if the delete or backspace key will actually deletethe single remaining character.
这将需要更多的工作来检查当前字符位置并确定删除或退格键是否会实际删除单个剩余字符。
Although it was worth the extra effort to make this seemless and visually appealing for our most common use case, going beyond this wasn't necessary. :)
尽管对于我们最常见的用例来说，为了使这看起来既美观又具有视觉吸引力，付出额外的努力是值得的，但没有必要超越这一点。:)
回答by mokNathal
Above answers are pretty good, just wanted to add short form for this
上面的答案很好，只是想为此添加简短的形式
<input type="text" name="input_text" onKeyUP="this.value = this.value.toUpperCase();">
回答by vol7ron
jQuery:
jQuery：
var inputs = $('#foo');
inputs.each(function(){
this.style.textTransform = 'uppercase';
})
.keyup(function(){
this.value = this.value.toUpperCase();
});
- Set the input's style to capitals (so user doesn't see the change)
- Automatically adjust the value (so the user doesn't have to hold shift or use caps lock)
- 将输入的样式设置为大写（因此用户看不到更改）
- 自动调整值（因此用户不必按住 shift 或使用大写锁定）
回答by Bill L.
Solution 1(Elegant approach with great user experience)
解决方案 1（优雅的方法，具有出色的用户体验）
HTML
HTML
<input id="inputID" class="uppercase" name="inputName" value="" />
CSS
CSS
.uppercase{
text-transform: uppercase;
}
JS
JS
$('#inputID').on('blur', function(){
this.value = this.value.toUpperCase();
});
By using CSS text-transform: uppercase;you'll eliminate the animation of lower to uppercase as the user types into the field.
通过使用 CSS，text-transform: uppercase;您将消除用户在字段中键入时从小写到大写的动画。
Use blurevent to handle converting to uppercase. This happens behind the scene as CSS took care of the user's visually appealing masking.
使用blur事件处理转换为大写。这发生在幕后，因为 CSS 负责处理用户视觉上吸引人的遮罩。
Solution 2(Great, but less elegant)
解决方案 2（很棒，但不太优雅）
If you insist on using keyup, here it is...
如果你坚持使用keyup，这里是......
$('#inputID').on('keyup', function(){
var caretPos = this.selectionStart;
this.value = this.value.toUpperCase();
this.setSelectionRange(caretPos, caretPos);
});
User would notice the animation of lowercase to uppercase as they type into the field. It gets the job done.
用户在输入字段时会注意到小写到大写的动画。它完成了工作。
Solution 3(Just get the job done)
解决方案 3（只需完成工作）
$('#inputID').on('keyup', function(){
this.value = this.value.toUpperCase();
});
This method is most commonly suggested but I do not recommend.
这种方法最常被推荐，但我不推荐。
The downside of this solution is you'll be annoying the user as the cursor's caret position keeps jumping to the end of the text after every key input. Unless you know your users will never encounter typos or they will always clear the text and retype every single time, this method works.
此解决方案的缺点是您会惹恼用户，因为每次输入键后，光标的插入符号位置都会跳到文本的末尾。除非您知道您的用户永远不会遇到拼写错误，或者他们每次都会清除文本并重新输入，否则此方法有效。
回答by Endang Taryana
I success use this code to change uppercase
我成功使用此代码更改大写
$(document).ready(function(){
$('#kode').keyup(function()
{
$(this).val($(this).val().toUpperCase());
});
});
</script>
in your html tag bootstraps
在您的 html 标签引导程序中
<div class="form-group">
<label class="control-label col-md-3">Kode</label>
<div class="col-md-9 col-sm-9 col-xs-12">
<input name="kode" placeholder="Kode matakul" id="kode" class="form-control col-md-7 col-xs-12" type="text" required="required" maxlength="15">
<span class="fa fa-user form-control-feedback right" aria-hidden="true"></span>
</div>
</div>
回答by prem
This worked for me
这对我有用
jQuery(document).ready(function(){
jQuery('input').keyup(function() {
this.value = this.value.toLocaleUpperCase();
});
jQuery('textarea').keyup(function() {
this.value = this.value.toLocaleUpperCase();
});
});
