Avec jQuery, comment mettre en majuscule la première lettre d'un champ de texte alors que l'utilisateur est encore en train de le modifier ?

Question

Je cherche un exemple de la façon de mettre en majuscule la première lettre d'une chaîne de caractères saisie dans un champ de texte. Normalement, cela est fait sur l'ensemble du champ avec une fonction, regex, OnBlur , OnChange etc. Je veux mettre en majuscule la première lettre pendant que l'utilisateur est toujours typage.

Par exemple, si je tape le mot "chat", l'utilisateur doit appuyer sur "c", et lorsqu'il appuie sur "a", le C doit être en majuscule dans le champ.

Je pense que ce que je cherche pourrait être possible avec keyup ou keypress mais je ne sais pas par où commencer.

Quelqu'un a un exemple à me donner ?

Answer 1

Utilisez simplement les CSS.

.myclass 
{
    text-transform:capitalize;
}

Answer 2

Cela transformera simplement la première lettre du texte :

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

Answer 3

J'ai répondu à cette question quelque part ailleurs. Cependant, voici deux fonctions que vous pourriez vouloir appeler sur l'événement keyup.

Pour mettre la majuscule au premier mot

  function ucfirst(str,force){
          str=force ? str.toLowerCase() : str;
          return str.replace(/(\b)([a-zA-Z])/,
                   function(firstLetter){
                      return   firstLetter.toUpperCase();
                   });
     }

Et de mettre une majuscule à 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 l'a suggéré @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 cela vous aidera

Santé :)

Answer 4

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

Answer 5

La solution CSS avec "text-transform : capitalize ;" n'est pas bonne si vous voulez 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 précédemment, et met en majuscule les mots après les traits d'union, par exemple : "Tro Lo-Lo" :

Ajoutez à votre script :

jQuery.fn.capitalize = function() {
    $(this[0]).keyup(function(event) {
        var box = event.target;
        var txt = $(this).val();
        var start = box.selectionStart;
        var end = box.selectionEnd;
        $(this).val(txt.replace(/^(.)|(\s|\-)(.)/g, function($1) {
            return $1.toUpperCase();
        }));
        box.setSelectionRange(start, end);
    });

   return this;
}

Il suffit ensuite d'attacher capitalize() à n'importe quel sélecteur :

$('#myform input').capitalize();