我正在寻找一个示例，该示例如何大写输入文本字段的字符串的首字母。通常情况下，这是对整个领域完成了一个功能，正则表达式，OnBlur，OnChange等我想首字母大写，而用户仍然打字。
例如，如果我输入单词“ cat”，则用户应按“ c”，然后在按“ a”时，C应当在该字段中大写。
我想我想要的是可能的 keyup或keypress，但我不知道从哪里开始。
有人给我一个例子吗？
Answers:
只需使用CSS。
.myclass
{
text-transform:capitalize;
}
这将简单地转换您的文本首字母：
yourtext.substr(0,1).toUpperCase()+yourtext.substr(1);
我在其他地方回答了这个问题。但是，您可能要在keyup事件上调用以下两个函数。
大写第一个字
function ucfirst(str,force){
str=force ? str.toLowerCase() : str;
return str.replace(/(\b)([a-zA-Z])/,
function(firstLetter){
return firstLetter.toUpperCase();
});
}
并大写所有单词
function ucwords(str,force){
str=force ? str.toLowerCase() : str;
return str.replace(/(\b)([a-zA-Z])/g,
function(firstLetter){
return firstLetter.toUpperCase();
});
}
正如@Darrell建议的
$('input[type="text"]').keyup(function(evt){
// force: true to lower case all letter except first
var cp_value= ucfirst($(this).val(),true) ;
// to capitalize all words
//var cp_value= ucwords($(this).val(),true) ;
$(this).val(cp_value );
});
希望这会有所帮助
干杯:)
.blur()因为否则用户无法使用Ctrl+A来选择全部。
$('input[type="text"]').keyup(function(evt){
var txt = $(this).val();
// Regex taken from php.js (http://phpjs.org/functions/ucwords:569)
$(this).val(txt.replace(/^(.)|\s(.)/g, function($1){ return $1.toUpperCase( ); }));
});
具有“ text-transform：大写”的CSS解决方案 如果您想在后端使用输入内容，那就不好了。您仍将原样接收数据。JavaScript解决了这个问题。
jQuery插件结合了前面提到的一些技术，另外它在连字符后大写单词，即：“ Tro Lo-Lo”：
添加到您的脚本：
jQuery.fn.capitalize = function() {
$(this[0]).keyup(function(event) {
var box = event.target;
var txt = $(this).val();
var stringStart = box.selectionStart;
var stringEnd = box.selectionEnd;
$(this).val(txt.replace(/^(.)|(\s|\-)(.)/g, function($word) {
return $word.toUpperCase();
}));
box.setSelectionRange(stringStart , stringEnd);
});
return this;
}
然后只需将capitalize（）附加到任何选择器：
$('#myform input').capitalize();
我使用了@Spajus的代码，并编写了更扩展的jQuery插件。
我编写了以下四个jQuery函数：
upperFirstAll() 大写输入字段中的所有单词upperFirst() 仅将第一个单词大写upperCase() 将孔文字转换为大写lowerCase() 将孔文字转换为小写您可以像使用其他任何jQuery函数一样使用和链接它们：
$('#firstname').upperFirstAll()
我完整的jQuery插件：
(function ($) {
$.fn.extend({
// With every keystroke capitalize first letter of ALL words in the text
upperFirstAll: function() {
$(this).keyup(function(event) {
var box = event.target;
var txt = $(this).val();
var start = box.selectionStart;
var end = box.selectionEnd;
$(this).val(txt.toLowerCase().replace(/^(.)|(\s|\-)(.)/g,
function(c) {
return c.toUpperCase();
}));
box.setSelectionRange(start, end);
});
return this;
},
// With every keystroke capitalize first letter of the FIRST word in the text
upperFirst: function() {
$(this).keyup(function(event) {
var box = event.target;
var txt = $(this).val();
var start = box.selectionStart;
var end = box.selectionEnd;
$(this).val(txt.toLowerCase().replace(/^(.)/g,
function(c) {
return c.toUpperCase();
}));
box.setSelectionRange(start, end);
});
return this;
},
// Converts with every keystroke the hole text to lowercase
lowerCase: function() {
$(this).keyup(function(event) {
var box = event.target;
var txt = $(this).val();
var start = box.selectionStart;
var end = box.selectionEnd;
$(this).val(txt.toLowerCase());
box.setSelectionRange(start, end);
});
return this;
},
// Converts with every keystroke the hole text to uppercase
upperCase: function() {
$(this).keyup(function(event) {
var box = event.target;
var txt = $(this).val();
var start = box.selectionStart;
var end = box.selectionEnd;
$(this).val(txt.toUpperCase());
box.setSelectionRange(start, end);
});
return this;
}
});
}(jQuery));
Groetjes :)
使用jQuery时，我个人最喜欢的简短而有趣：
function capitalize(word) {
return $.camelCase("-" + word);
}
有一个jQuery插件也可以做到这一点。我称它为... jCap.js
$.fn.extend($, {
capitalize: function() {
return $.camelCase("-"+arguments[0]);
}
});
对上面的代码稍作更新，以强制在首字母大写之前将字符串降低。
（均使用Jquery语法）
function CapitaliseFirstLetter(elemId) {
var txt = $("#" + elemId).val().toLowerCase();
$("#" + elemId).val(txt.replace(/^(.)|\s(.)/g, function($1) {
return $1.toUpperCase(); }));
}
另外一个将WHOLE字符串大写的函数：
function CapitaliseAllText(elemId) {
var txt = $("#" + elemId).val();
$("#" + elemId).val(txt.toUpperCase());
}
在文本框的click事件上使用的语法：
onClick="CapitaliseFirstLetter('myTextboxId'); return false"
我的应用程序。语法由于我匆忙草率而关闭。干得好...
$('#tester').live("keyup", function (evt)
{
var txt = $(this).val();
txt = txt.substring(0, 1).toUpperCase() + txt.substring(1);
$(this).val(txt);
});
简单但可行。您可能想使它更通用，更即插即用。这只是用更少的代码提供了另一个想法。我的编码理念是使其尽可能通用，并使用尽可能少的代码。
希望这可以帮助。祝您编码愉快！:)
土耳其的。如果仍然有兴趣。
$('input[type="text"]').keyup(function() {
$(this).val($(this).val().replace(/^([a-zA-Z\s\ö\ç\ş\ı\i\ğ\ü\Ö\Ç\Ş\İ\Ğ\Ü])|\s+([a-zA-Z\s\ö\ç\ş\ı\i\ğ\ü\Ö\Ç\Ş\İ\Ğ\Ü])/g, function ($1) {
if ($1 == "i")
return "İ";
else if ($1 == " i")
return " İ";
return $1.toUpperCase();
}));
});
这将帮助您-将每个单词的首字母转换为大写
<script>
/* convert First Letter UpperCase */
$('#txtField').on('keyup', function (e) {
var txt = $(this).val();
$(this).val(txt.replace(/^(.)|\s(.)/g, function ($1) {
return $1.toUpperCase( );
}));
});
</script>
示例：这是一个标题案例句子->这是一个标题案例句子
接受异常（通过参数传递）的解决方案：
复制下面的代码并像这样使用它：$（'myselector'）。maskOwnName（['of'，'on'，'a'，'as'，'at'，'for'，'in'，'to ']）;
(function($) {
$.fn.maskOwnName = function(not_capitalize) {
not_capitalize = !(not_capitalize instanceof Array)? []: not_capitalize;
$(this).keypress(function(e){
if(e.altKey || e.ctrlKey)
return;
var new_char = String.fromCharCode(e.which).toLowerCase();
if(/[a-zà-ú\.\, ]/.test(new_char) || e.keyCode == 8){
var start = this.selectionStart,
end = this.selectionEnd;
if(e.keyCode == 8){
if(start == end)
start--;
new_char = '';
}
var new_value = [this.value.slice(0, start), new_char, this.value.slice(end)].join('');
var maxlength = this.getAttribute('maxlength');
var words = new_value.split(' ');
start += new_char.length;
end = start;
if(maxlength === null || new_value.length <= maxlength)
e.preventDefault();
else
return;
for (var i = 0; i < words.length; i++){
words[i] = words[i].toLowerCase();
if(not_capitalize.indexOf(words[i]) == -1)
words[i] = words[i].substring(0,1).toUpperCase() + words[i].substring(1,words[i].length).toLowerCase();
}
this.value = words.join(' ');
this.setSelectionRange(start, end);
}
});
}
$.fn.maskLowerName = function(pos) {
$(this).css('text-transform', 'lowercase').bind('blur change', function(){
this.value = this.value.toLowerCase();
});
}
$.fn.maskUpperName = function(pos) {
$(this).css('text-transform', 'uppercase').bind('blur change', function(){
this.value = this.value.toUpperCase();
});
}
})(jQuery);
jQuery或Javascipt没有提供实现此目的的内置方法。
CSS测试转换（text-transform:capitalize;）并未真正大写字符串的数据，而是在屏幕上显示了大写的呈现。
如果您正在寻找使用普通vanillaJS在数据级别实现此目标的更合法方法，请使用此解决方案=>
var capitalizeString = function (word) {
word = word.toLowerCase();
if (word.indexOf(" ") != -1) { // passed param contains 1 + words
word = word.replace(/\s/g, "--");
var result = $.camelCase("-" + word);
return result.replace(/-/g, " ");
} else {
return $.camelCase("-" + word);
}
}
我的尝试。
仅当所有文本均为小写字母或全部为大写字母时，才使用区域设置大小写转换。尝试尊重人为的大小写差异或名称中的'或'。发生在Blur上，不会在电话上引起烦恼。尽管保留在选择开始/结束位置，所以如果更改为键盘可能仍然有用。应该可以在电话上使用，但没有尝试过。
$.fn.capitalize = function() {
$(this).blur(function(event) {
var box = event.target;
var txt = $(this).val();
var lc = txt.toLocaleLowerCase();
var startingWithLowerCaseLetterRegex = new RegExp("\b([a-z])", "g");
if (!/([-'"])/.test(txt) && txt === lc || txt === txt.toLocaleUpperCase()) {
var stringStart = box.selectionStart;
var stringEnd = box.selectionEnd;
$(this).val(lc.replace(startingWithLowerCaseLetterRegex, function(c) { return c.toLocaleUpperCase() }).trim());
box.setSelectionRange(stringStart, stringEnd);
}
});
return this;
}
// Usage:
$('input[type=text].capitalize').capitalize();