javascript 使用 JQuery 实时将用户输入的第一个字符大写
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19867701/
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
Capitalize first character of user input in real time with JQuery
提问by JSP64
I am trying to auto-capitalize the first character of a textarea/input that the user inputs. The first attempt looked like this:
我正在尝试将用户输入的文本区域/输入的第一个字符自动大写。第一次尝试是这样的：
$(document).ready(function() {
$('input').on('keydown', function() {
if (this.value[0] != this.value[0].toUpperCase()) {
// store current positions in variables
var start = this.selectionStart;
var end = this.selectionEnd;
this.value = this.value[0].toUpperCase() + this.value.substring(1);
// restore from variables...
this.setSelectionRange(start, end);
}
});
});
The problem with this is that it shows the lowercase character and then corrects it, which is ugly (http://jsfiddle.net/9zPTA/2/). I would like to run my javascript on keydown instead of keyup, and transform the event in flight (or intercept it, prevent default, and trigger a modified new event).
这样做的问题是它显示小写字符然后更正它，这很丑陋（http://jsfiddle.net/9zPTA/2/）。我想在keydown而不是keyup上运行我的javascript，并在飞行中转换事件（或拦截它，防止默认，并触发修改后的新事件）。
Here's what I have now, which doesn't work (http://jsfiddle.net/9zPTA/5/):
这是我现在拥有的，但不起作用（http://jsfiddle.net/9zPTA/5/）：
$(document).ready(function() {
$('input').on('keydown', function(event) {
if (this.selectionStart == 0 && event.keyCode >= 65 && event.keyCode <= 90 && !(event.shiftKey)) {
event.preventDefault();
var myEvent = jQuery.Event('keypress');
myEvent.target = event.target;
myEvent.shiftKey = true;
myEvent.keyCode = event.keyCode;
$(document).trigger(myEvent);
}
});
});
I'm not sure why this doesn't work - what am I missing here?
我不确定为什么这不起作用 - 我在这里错过了什么？
回答by Borre Mosch
It would be much easier to use CSS in this case:
在这种情况下使用 CSS 会容易得多：
input{
text-transform: capitalize;
}
Update: this works when you don't want to capitalize the first letter of every word, but only the first letter of the first word:
更新：当您不想大写每个单词的第一个字母，而只想大写第一个单词的第一个字母时，此方法有效：
input::first-letter{
text-transform: uppercase;
}
回答by Shaded
Hereis a fiddle I made that does what you want in Chrome. I'm not sure if it will work in other browsers.
这是我制作的小提琴，可以在 Chrome 中执行您想要的操作。我不确定它是否适用于其他浏览器。
Code:
代码：
$(document).ready(function() {
$('input').on('keydown', function(event) {
if (this.selectionStart == 0 && event.keyCode >= 65 && event.keyCode <= 90 && !(event.shiftKey) && !(event.ctrlKey) && !(event.metaKey) && !(event.altKey)) {
var $t = $(this);
event.preventDefault();
var char = String.fromCharCode(event.keyCode);
$t.val(char + $t.val().slice(this.selectionEnd));
this.setSelectionRange(1,1);
}
});
});
回答by Henrique Barcelos
Try this:
试试这个：
$(document).ready(function() {
$('input').on('keydown', function(e) {
if (this.value == '') {
var char = String.fromCharCode(e.which);
if (char.match(/^\w$/)) {
// If is empty and we pressed a printable key...
this.value = char.toUpperCase();
return false;
}
}
});
});
See in use here.
请参阅此处使用。
回答by user3266296
This works for me.
这对我有用。
$('input').keyup(function() {
$(this).val($(this).val().substr(0, 1).toUpperCase() + $(this).val().substr(1).toLowerCase());
});
回答by Apurva
You can use a jQuery function:
您可以使用 jQuery 函数：
$.fn.CapitalizeFirst = function () {
return this.each(function () {
$(this).on('keydown', function (event) {
if (this.selectionStart == 0 && event.keyCode >= 65 && event.keyCode <= 90 && !(event.shiftKey) && !(event.ctrlKey) && !(event.metaKey) && !(event.altKey)) {
var $t = $(this);
event.preventDefault();
var char = String.fromCharCode(event.keyCode);
$t.val(char + $t.val().slice(this.selectionEnd));
this.setSelectionRange(1, 1);
}
});
});
};
回答by Nahabwe Edwin
Working jQuery. Make sure you write the code below after importing jQuery:
工作jQuery。确保在导入 jQuery 后编写以下代码：
<script type="text/javascript" charset="utf-8">
jQuery(document).ready(function($) {
$('#id_of_input').keyup(function(event) {
var textBox = event.target;
var start = textBox.selectionStart;
var end = textBox.selectionEnd;
textBox.value = textBox.value.charAt(0).toUpperCase() + textBox.value.slice(1);
textBox.setSelectionRange(start, end);
});
});
</script>
回答by johnsoe
This was discussed in a previous thread. How do I make the first letter of a string uppercase in JavaScript?
这在之前的线程中讨论过。 如何在 JavaScript 中使字符串的第一个字母大写？
You could just grab the users input after the first word is typed or really whenever you want and reset the value using the methods discussed in the link above.
您可以在输入第一个单词后或真正需要时获取用户输入，并使用上面链接中讨论的方法重置值。
回答by Ineye Gabriel
$('selector').blur(function(){
$(this).val($(this).val().charAt(0).toUpperCase()+$(this).val().slice(1));
});
