problème keyup Majuscules

Question

Je voudrais avoir une entrée qui changerait en majuscules sur keyup. Donc, je joins un événement simple sur keyup.

HTML

<input id="test"/>

Javascript (avec jQuery)

$("#test").keyup(function(){
  this.value = this.value.toUpperCase();
});

Mais je trouve que dans Chrome et IE, lorsque vous appuyez sur la flèche gauche, le curseur se déplacent automatiquement à la fin. Je remarque que je perçois si l'entrée est seule lettre. Dois-je utiliser gamme de code ou regexp pour la détection?

Exemple: http://jsbin.com/omope3

Answer 1

Vous pouvez utiliser ce qui suit (ce qui est probablement plus rapide et plus élégante):

<input style="text-transform: uppercase" type='text'></input>

Mais qui envoie la valeur typée de retour dans les données de formulaire, alors utilisez l'une des options suivantes pour stocker comme en majuscules dans la base de données:

MySQL: UPPER(str)

PHP: strtoupper()

Answer 2

Une autre solution, si vous utilisez le text-transform: majuscules; propriété CSS:

<input id='test' style='text-transform: uppercase;' type='text'></input>

Et avec jQuery vous aider à choisir l'événement flou :

$("#test").blur(function(){
  this.value = this.value.toUpperCase();
});

Avec cette solution, vous n'avez pas supérieure les champs de base de données, vous pouvez utiliser le curseur pour le mouvement et l'utilisateur peut insérer / réécrire le texte dans le champ de saisie.

Answer 3

Utilisez ceci:

<input onkeyup="MakeMeUpper(this)" type="text"/>

Et dans votre code JS partie mis:

function MakeMeUpper(f, e){ 
  var actualValue = f.value;        
  var upperValue = f.value.toUpperCase();
  if( actValue != upperValue){
    f.value = upperValue;       
  }   
}

Ce code ne changera pas le texte si l'utilisateur est entré dans quelque chose qui est pas le texte (flèche gauche ou droite).

Answer 4

Ouais, ressemble à certains navigateurs se déplacent le curseur vers la fin lorsque la valeur est mise à jour. Vous pouvez faire ceci:

$("#test").keyup(function(){
  var upper = this.value.toUpperCase();
  if (this.value != upper) 
      this.value = upper;
});

qui ne changera la valeur si elle a besoin d'être changé. Cependant, que vous laisse encore le problème que si vous tapez abd, se déplacer à gauche, appuyez sur c pour obtenir abcd, le curseur sera toujours déplacé à se la fin.

Answer 5

Javascript (avec jQuery)

$("#test").keyup(function(){
  $(this).val($(this).val().toUpperCase());
});

Answer 6

var str = $(this).val();
if (evt.keyCode != 37 && evt.keyCode != 39)
{
    str = str.toLowerCase().replace(/\b[a-z]/g, function(letter) {
        return letter.toUpperCase();
    });
    $(this).val(str);
}

Answer 7

Vous voulez probablement regarder votre mot de code dans la fonction keyup.

var UP_ARROW = 38,
    DOWN_ARROW = 40;

$('#test').keyup(function(evt){
    if (evt.keyCode == UP_ARROW)
    {
        this.value = this.value.toUpperCase();
    }

    if (evt.keyCode == DOWN_ARROW)
    {
        this.value = this.value.toLowerCase();
    }
});