使用 jQuery 时，如何在用户仍在编辑文本字段时将该字段的第一个字母大写？

$('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 就行了。

.myclass
{
text-transform:capitalize;
}

我在别的地方回答了这个问题。但是，这里有两个函数你可能需要调用 关键词事件。

首字母大写第一个单词

  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 );


});

希望这对你有帮助

干杯:)

CSS 解决方案与“文本转换: 大写;”是不好的，如果你想在后端使用输入的内容。您仍然会收到原样的数据。JavaScript 解决了这个问题。

JQuery 插件结合了前面提到的一些技术，加上它将连字符后面的单词大写，例如: “ TroLo-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();

对上面的代码稍作更新，以强制在将第一个字母大写之前将字符串降低。

(两者都使用 Jquery 语法)

    function CapitaliseFirstLetter(elemId) {
var txt = $("#" + elemId).val().toLowerCase();
$("#" + elemId).val(txt.replace(/^(.)|\s(.)/g, function($1) {
return $1.toUpperCase(); }));
}

另外还有一个将整个字符串大写的函数:

    function CapitaliseAllText(elemId) {
var txt = $("#" + elemId).val();
$("#" + elemId).val(txt.toUpperCase());
}

用于文本框的单击事件的语法:

    onClick="CapitaliseFirstLetter('myTextboxId'); return false"

这将简单地改变你的第一个字母:

yourtext.substr(0,1).toUpperCase()+yourtext.substr(1);

    .first-character{
font-weight:bold;
color:#F00;
text-transform:capitalize;
}
.capital-text{
text-transform:uppercase;
}

我使用了@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:)

对不起，语法错误是因为我太匆忙太草率了，给你。

     $('#tester').live("keyup", function (evt)
{
var txt = $(this).val();
txt = txt.substring(0, 1).toUpperCase() + txt.substring(1);
$(this).val(txt);
});

简单但有效。你肯定想让它更通用，更具有即插即用性和可玩性。这只是为了提供另一个想法，使用更少的代码。我的编码哲学是，尽可能使它通用，尽可能减少代码。

希望这能有所帮助。编程愉快! :)

你可以用这个大写输入字段的第一个字母，真是太酷了。.如果有人知道如何大写像 CSS 文本转换: 大写，请回复。. 给你。

$(‘ input-field’) . keyup (function (event){ $(this) . val (($(this) . val () . subr (0,1) . toUpperCase ()) + ($(this) . val () . subr (1)) ; }) ;

在使用 jQuery 时，我个人最喜欢的是简短而甜蜜的:

function capitalize(word) {
return $.camelCase("-" + word);
}

有一个 jQuery 插件也可以做到这一点，我将它命名为... jCap.js

$.fn.extend($, {
capitalize: function() {
return $.camelCase("-"+arguments[0]);
}
});

土耳其的，如果还有人感兴趣的话。

 $('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();
}));
});

 $("#test").keyup(
function () {
this.value = this.value.substr(0, 1).toUpperCase() + this.value.substr(1).toLowerCase();
}
);

累积的解决方案略有更新。

如果单词之间有多个空格，那么 upperFirstAll 函数就无法正常工作。替换这个正则表达式来解决这个问题:

$(this).val(txt.toLowerCase().replace(/^(.)|(\s|\-)+(.)/g,

这将帮助您将每个单词的首字母转换为大写

<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;)实际上并不大写字符串的数据，而是在屏幕上显示大写的呈现。

如果您希望在数据级别使用普通的 香草味实现更多的 合法的方式，请使用此解决方案 = >

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);
}
}

使用 Javascript，你可以使用:

yourtext.substr(0,1).toUpperCase()+yourtext.substr(1);

如果你正巧用 PHP生成你的网页，你也可以使用:

<?=ucfirst($your_text)?>

在实现这一点时，我同时使用了 CSS 和 jQuery 解决方案。这将改变它在浏览器中的显示方式和数据值。一个简单的解决方案，很管用。

CSS

#field {
text-transform: capitalize;
}

JQuery

$('#field').keyup(function() {
var caps = jQuery('#field').val();
caps = caps.charAt(0).toUpperCase() + caps.slice(1);
jQuery('#field').val(caps);
});

我的尝试。

只有当所有文本都是小写或全部大写时，才使用区域设置大小写转换。试图在名称中尊重有意的大小写差异或 a’或“。 红蓝侠不会在手机上制造麻烦。 虽然左边的选择开始/结束，所以如果更改为键控可能仍然有用。 应该在电话上工作，但没有尝试。

$.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();

如果使用 Bootstrap，请添加:

class="text-capitalize"

例如:

<input type="text" class="form-control text-capitalize" placeholder="Full Name" value="">