Avec jQuery, comment puis-je mettre en majuscule la première lettre d'un champ de texte pendant que l'utilisateur est toujours en train de le modifier?
Je cherche un exemple montrant comment mettre en majuscule la première lettre d'une chaîne entrée dans un champ de texte. Normalement, cela se fait sur tout le champ avec une fonction, regex, OnBlur, OnChange, etc. Je souhaite mettre la première lettre en majuscule lorsque l'utilisateur est toujours dactylographie.
Par exemple, si je tape le mot "chat", l'utilisateur doit appuyer sur "c", puis au moment où il appuie sur "a", le C doit être mis en majuscule dans le champ.
Je pense que ce que je vais faire serait possible avec keyup ou keypress, mais je ne sais pas par où commencer.
Quelqu'un a un exemple pour moi?
Il suffit d'utiliser CSS.
.myclass
{
text-transform:capitalize;
}
Ceci transformera simplement votre première lettre de texte:
yourtext.substr(0,1).toUpperCase()+yourtext.substr(1);
J'ai répondu cela ailleurs. Cependant, il y a deux fonctions que vous voudrez peut-être appeler lors d'un événement keyup.
Pour capitaliser le premier mot
function ucfirst(str,force){
str=force ? str.toLowerCase() : str;
return str.replace(/(\b)([a-zA-Z])/,
function(firstLetter){
return firstLetter.toUpperCase();
});
}
Et pour capitaliser tous les mots
function ucwords(str,force){
str=force ? str.toLowerCase() : str;
return str.replace(/(\b)([a-zA-Z])/g,
function(firstLetter){
return firstLetter.toUpperCase();
});
}
Comme suggéré par @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 );
});
J'espère que c'est utile
À votre santé :)
$('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( ); }));
});
Solution CSS avec "text-transform: capitalize;" n’est pas utile si vous souhaitez utiliser le contenu de l’entrée dans le backend. Vous recevrez toujours les données telles quelles. JavaScript résout ce problème.
Le plugin JQuery combine certaines des techniques mentionnées plus haut, plus des majuscules après des traits d'union, c'est-à-dire: "Tro Lo-Lo":
Ajoutez à votre script:
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;
}
Ensuite, attachez simplement capitalize () à n’importe quel sélecteur:
$('#myform input').capitalize();
J'ai utilisé le code de @Spajus et écrit un plugin jQuery plus étendu.
J'ai écrit ces quatre fonctions jQuery:
upperFirstAll()pour mettre TOUS les mots dans un champ de saisieupperFirst()ne mettre en majuscule que le PREMIER motupperCase()pour convertir le texte du trou en majusculelowerCase()pour convertir le texte du trou en minuscule
Vous pouvez les utiliser et les chaîner comme n'importe quelle autre fonction jQuery:$('#firstname').upperFirstAll()
Mon plugin complet 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 :)
Mon préféré lorsque jQuery est utilisé est court et simple:
function capitalize(Word) {
return $.camelCase("-" + Word);
}
Il y a un plugin jQuery qui fait ça aussi. Je vais l'appeler ... 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();
}
);
Mise à jour légère du code ci-dessus pour forcer la chaîne à s’abaisser avant la mise en majuscule de la première lettre.
(Les deux utilisent la syntaxe Jquery)
function CapitaliseFirstLetter(elemId) {
var txt = $("#" + elemId).val().toLowerCase();
$("#" + elemId).val(txt.replace(/^(.)|\s(.)/g, function($1) {
return $1.toUpperCase(); }));
}
En plus une fonction pour capitaliser la chaîne WHOLE:
function CapitaliseAllText(elemId) {
var txt = $("#" + elemId).val();
$("#" + elemId).val(txt.toUpperCase());
}
Syntaxe à utiliser sur l'événement de clic d'une zone de texte:
onClick="CapitaliseFirstLetter('myTextboxId'); return false"
Mes excuses. La syntaxe était incorrecte car j'étais pressé et négligent. Voici...
$('#tester').live("keyup", function (evt)
{
var txt = $(this).val();
txt = txt.substring(0, 1).toUpperCase() + txt.substring(1);
$(this).val(txt);
});
Simple mais fonctionne. Vous voudriez certainement rendre ceci plus général et plus facile à reproduire. Ceci est juste pour offrir une autre idée, avec moins de code. Ma philosophie avec le codage est de le rendre aussi général que possible et avec le moins de code possible.
J'espère que cela t'aides. Bonne codage! :)
C'est très cool, vous pouvez mettre en majuscule Seule la première lettre d'un champ de saisie Avec celui-ci .. Si quelqu'un sait comment mettre en majuscule.
$('input-field').keyup(function(event) { $(this).val(($(this).val().substr(0,1).toUpperCase())+($(this).val().substr(1))); });
Un turc. Si quelqu'un est toujours intéressé.
$('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();
}));
});
cela vous aidera à convertir la première lettre de chaque mot en majuscule
<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>
Exemple: il s'agit d'une phrase avec titre -> Ceci est une phrase avec titre
Avec Javascript vous pouvez utiliser:
yourtext.substr(0,1).toUpperCase()+yourtext.substr(1);
Si par hasard vous générez votre page Web avec PHP vous pouvez aussi utiliser:
<?=ucfirst($your_text)?>
Une solution qui accepte les exceptions (passées par des paramètres):
Copiez le code ci-dessous et utilisez-le comme ceci: $ ('myselector'). MaskOwnName (['of', 'sur', 'a', 'en', 'en', 'pour', 'pour', 'dans', 'pour ']);
(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);
J'utilise les solutions CSS et jQuery pour y parvenir. Cela modifiera à la fois son apparence dans le navigateur et la valeur des données. Une solution simple, ça marche.
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 ou Javascipt ne fournit pas de méthode intégrée pour y parvenir.
Transformation de test CSS (text-transform:capitalize;) ne capitalise pas vraiment les données de la chaîne mais affiche un rendu en majuscule à l'écran.
Si vous recherchez un plus moyen légitime de le réaliser dans le niveau de données en utilisant plain vanillaJS, utilisez cette solution =>
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;
}