我正在寻找一个示例,说明如何将输入到文本字段中的字符串的第一个字母大写。通常,这是使用函数、正则表达式OnBlur
、OnChange
、 等在整个字段上完成的。我想在用户仍在键入时将第一个字母大写。
例如,如果我输入“cat”这个词,用户应该按“c”,然后当他按“a”时,C 应该在字段中大写。
我认为我的目标可能是keyup
或者keypress
但我不确定从哪里开始。
有人有我的例子吗?
我正在寻找一个示例,说明如何将输入到文本字段中的字符串的第一个字母大写。通常,这是使用函数、正则表达式OnBlur
、OnChange
、 等在整个字段上完成的。我想在用户仍在键入时将第一个字母大写。
例如,如果我输入“cat”这个词,用户应该按“c”,然后当他按“a”时,C 应该在字段中大写。
我认为我的目标可能是keyup
或者keypress
但我不确定从哪里开始。
有人有我的例子吗?
只需使用 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 );
});
希望这有帮助
干杯:)
$('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( ); }));
});
带有“文本转换:大写;”的 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;
}
然后只需将大写()附加到任何选择器:
$('#myform input').capitalize();