使用jQuery，如何在文本字段的第一个字母大写，而用户仍在编辑该字段？
我正在寻找一个如何大写input到文本字段的string的第一个字母的例子。 通常情况下，这是在整个领域完成一个函数，正则expression式， OnBlur ， OnChange等，我想大写的第一个字母，而用户仍然在打字。
例如，如果我input单词“猫”，用户应该按“c”，然后在按“a”的时候，C应该在字段中大写。
我想我可能会用keyup或keypress但我不知道从哪里开始。
任何人都有我的例子吗？
只要使用CSS。
.myclass { text-transform:capitalize; }
这将简单地转换你的第一个字母的文字：
yourtext.substr(0,1).toUpperCase()+yourtext.substr(1);
$('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( ); })); });
我在别的地方回答了这个问题。 不过，这里有两个函数可能需要调用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(); }); }
作为@达雷尔build议
$('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 ); });
希望这是有帮助的
干杯:)
具有“text-transform：capitalize”的CSS解决scheme 如果你想使用后端input的内容是不好的。 您仍然会收到原样的数据。 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; }
然后把大写（）添加到任何select器：
$('#myform input').capitalize();
我使用@Spajus的代码，并写了一个更加扩展的jQuery插件。
我写了这四个jQuery函数：
-
upperFirstAll()大写input字段中的所有单词 -
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]); } });
稍微更新上面的代码，强制string在Capitaliing的第一个字母之前降低。
（两者都使用Jquery语法）
function CapitaliseFirstLetter(elemId) { var txt = $("#" + elemId).val().toLowerCase(); $("#" + elemId).val(txt.replace(/^(.)|\s(.)/g, function($1) { return $1.toUpperCase(); })); }
另外还有一个大写string的函数：
function CapitaliseAllText(elemId) { var txt = $("#" + elemId).val(); $("#" + elemId).val(txt.toUpperCase()); }
用于文本框的单击事件的语法：
onClick="CapitaliseFirstLetter('myTextboxId'); return false"
我的appologies。 由于我匆忙而马虎，语法已经closures了。 干得好…
$('#tester').live("keyup", function (evt) { var txt = $(this).val(); txt = txt.substring(0, 1).toUpperCase() + txt.substring(1); $(this).val(txt); });
简单但有效。 你会想让这个更一般的插件和播放。 这只是提供另一个想法，用更less的代码。 我的编码理念是尽可能地使其尽可能通用，尽可能减less代码。
希望这可以帮助。 快乐的编码！ 🙂
$("#test").keyup( function () { this.value = this.value.substr(0, 1).toUpperCase() + this.value.substr(1).toLowerCase(); } );
这是非常酷，你可以capitalize只有input字段的第一个字母有了这个..如果任何一个知道如何大写像CSS文本转换：大写，请回复..在这里你去..
$('input-field').keyup(function(event) { $(this).val(($(this).val().substr(0,1).toUpperCase())+($(this).val().substr(1))); });
一个土耳其人。 如果有人仍然感兴趣。
$('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>
例如：这是一个标题案例句子 – >这是一个标题案例句子
接受exception（通过parameter passing）的解决scheme：
复制下面的代码并使用它：$（'myselector'）。maskOwnName（[''''，''''，'as'，'''at'，'for'，'in'，' “]）;
(function($) { $.fn.teste = 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] = PHP.ucfirst(words[i]); } 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);
.first-character{ font-weight:bold; color:#F00; text-transform:capitalize; } .capital-text{ text-transform:uppercase; }
Jquery或Javascipt不提供一个内置的方法来实现这一点。
CSStesting变换（ text-transform:capitalize; ）并不真正大写string的数据，而是在屏幕上显示大写渲染。
如果您正在使用普通的vanillaJS寻找在数据级别上更合理的方法 ，请使用此解决scheme=>
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)?>
轻微更新为积木的解决scheme。
如果单词之间有多个空格，函数upperFirstAll不能正常工作。 replace这个正则expression式来解决它：
$(this).val(txt.toLowerCase().replace(/^(.)|(\s|\-)+(.)/g,
