jQueryを使用して、ユーザーがまだそのフィールドを編集している間にテキストフィールドの最初の文字を大文字にするにはどうすればよいですか？
テキストフィールドに入力される文字列の最初の文字を大文字にする方法の例を探しています。通常、これは関数、正規表現、OnBlur、OnChangeなどを使用してフィールド全体で行われます。ユーザーがstillである間に最初の文字を大文字にしたいタイピング。
たとえば、「cat」という単語を入力している場合、ユーザーは「c」を押し、「a」を押すまでにフィールドのCを大文字にする必要があります。
私はkeyupまたはkeypressを使って目的を達成できるかもしれないと思いますが、どこから始めればいいのかわかりません。
誰かが私のための例を持っていますか？
CSSを使用してください。
.myclass
{
text-transform:capitalize;
}
これにより、テキストの最初の文字が単純に変換されます。
yourtext.substr(0,1).toUpperCase()+yourtext.substr(1);
他のどこかでこれに答えました。ただし、キーアップイベントで呼び出すことができる2つの関数を次に示します。
最初のWordを大文字にするには
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( ); }));
});
「text-transform：capitalize;」を使用した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プラグインを作成しました。
これらの4つの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]);
}
});
$("#test").keyup(
function () {
this.value = this.value.substr(0, 1).toUpperCase() + this.value.substr(1).toLowerCase();
}
);
上記のコードをわずかに更新して、最初の文字を大文字にする前に文字列を強制的に低くします。
（両方とも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());
}
テキストボックスのクリックイベントで使用する構文：
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-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>
例：これはタイトルケース文です->これはタイトルケース文です
Javascriptでは、次を使用できます。
yourtext.substr(0,1).toUpperCase()+yourtext.substr(1);
偶然[〜＃〜] php [〜＃〜]でWebページを生成している場合、以下も使用できます。
<?=ucfirst($your_text)?>
例外を受け入れるソリューション（パラメーターによって渡される）：
以下のコードをコピーして、次のように使用します：$（ 'myselector'）。maskOwnName（['of'、 'on'、 'a'、 'as'、 'at'、 'for'、 'in'、 'to ']）;
(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);
これを達成するために、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);
});
JqueryまたはJavasciptは、これを実現するための組み込みメソッドを提供していません。
CSSテスト変換（text-transform:capitalize;）は、文字列のデータを実際に大文字にしませんが、画面上に大文字のレンダリングを表示します。
単純なvanillaJSを使用してデータレベルでこれを達成するために、より多くのlegit wayを探している場合は、このソリューションを使用してください=>
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);
}
}
.first-character{
font-weight:bold;
color:#F00;
text-transform:capitalize;
}
.capital-text{
text-transform:uppercase;
}