テキスト フィールドに入力される文字列の最初の文字を大文字にする方法の例を探しています。通常、これは関数、正規表現、、などを使用してフィールド全体で行われOnBlurます。ユーザーがまだ入力OnChangeしている間、最初の文字を大文字にしたいと思います。
たとえば、「cat」という単語を入力している場合、ユーザーは「c」を押す必要があり、「a」を押すまでに、C はフィールドで大文字にする必要があります。
私が目指していることはkeyuporで可能かもしれないと思いますkeypressが、どこから始めればよいかわかりません。
誰かが私の例を持っていますか?
CSSを使用するだけです。
.myclass
{
text-transform:capitalize;
}
これにより、テキストの最初の文字が単純に変換されます。
yourtext.substr(0,1).toUpperCase()+yourtext.substr(1);
私はこれに別の場所で答えました。ただし、keyup イベントで呼び出したい関数が 2 つあります。
最初の単語を大文字にする
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));
グロッチェス:)
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(); }));
}
さらに、文字列全体を大文字にする関数:
function CapitaliseAllText(elemId) {
var txt = $("#" + elemId).val();
$("#" + elemId).val(txt.toUpperCase());
}
テキスト ボックスのクリック イベントで使用する構文:
onClick="CapitaliseFirstLetter('myTextboxId'); return false"
これはあなたを助けます-各単語の最初の文字を大文字に変換します
<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>
例 : これは表題文です -> これは表題文です
入力フィールドの最初の文字だけを大文字にできるのはとてもクールです これで.. CSSのように大文字にする方法を知っている人がいれば text-transform:capitalize, 返信してください .. どうぞ..
$('input-field').keyup(function(event) {
$(this).val(($(this).val().substr(0,1).toUpperCase())+($(this).val().substr(1)));
});
申し訳ありません。私が急いでずさんだったので、構文がずれていました。どうぞ...
$('#tester').live("keyup", function (evt)
{
var txt = $(this).val();
txt = txt.substring(0, 1).toUpperCase() + txt.substring(1);
$(this).val(txt);
});
シンプルですが機能します。これをより一般的でプラグインしてプレイできるようにしたいと思うでしょう。これは、より少ないコードで別のアイデアを提供するためのものです。コーディングに関する私の哲学は、コードをできるだけ一般化し、コードをできるだけ少なくすることです。
お役に立てれば。ハッピーコーディング！:)
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.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);
.first-character{
font-weight:bold;
color:#F00;
text-transform:capitalize;
}
.capital-text{
text-transform:uppercase;
}
私の試み。
すべてのテキストが小文字またはすべて大文字の場合にのみ機能し、ロケールの大文字と小文字の変換を使用します。意図的な大文字と小文字の違い、または名前の ' または " を尊重しようとします。携帯電話で迷惑にならないように Blur で発生します。選択の開始/終了に残されていますが、keyup に変更した場合でも役立つ可能性があります。電話では動作するはずですが、試していません。
$.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();