web-dev-qa-db-fra.com

Désactiver les espaces en entrée ET autoriser la flèche de retour?

J'essaie de désactiver les espaces dans le champ de texte Nom d'utilisateur, mais mon code se désactive également à l'aide de la flèche de retour. Est-il possible d'autoriser la flèche arrière également?

    $(function() {
         var txt = $("input#UserName");
         var func = function() {
                      txt.val(txt.val().replace(/\s/g, ''));
                   }
         txt.keyup(func).blur(func);
    });

violon: http://jsfiddle.net/EJFbt/

javascriptjqueryhtmlinput
15
jakeforaker

Vous pouvez ajouter un gestionnaire keydown et empêcher l'action par défaut pour la touche espace (c'est-à-dire 32):

$("input#UserName").on({
  keydown: function(e) {
    if (e.which === 32)
      return false;
  },
  change: function() {
    this.value = this.value.replace(/\s/g, "");
  }
});

DEMO: http://jsfiddle.net/EJFbt/1/

52
VisioN

Il ne "désactive" pas la flèche de retour - votre code continue de remplacer tout le texte, chaque fois que vous appuyez sur une touche, et chaque fois que cela se produit, la position du curseur est perdue.

Ne faites pas ça.

Utilisez un meilleur mécanisme pour interdire les espaces, tel que renvoyant false à partir d'un gestionnaire onkeydown lorsque la touche enfoncée est space :

$(function() {
    $("input#Username").on("keydown", function (e) {
        return e.which !== 32;
    });​​​​​
});

De cette façon, votre zone de texte est interdite de recevoir les espaces en premier lieu et vous n'avez pas besoin de remplacer de texte. Le curseur ne sera donc pas affecté.

Mettre à jour

@ VisioN le code adapté ajoutera également cette prise en charge de l'interdiction d'espace aux opérations de copier-coller, tout en évitant le texte- replacement-on -keyup gestionnaires qui affectent la valeur de votre zone de texte pendant que votre curseur est toujours actif à l'intérieur.

Voici donc le code final:

$(function() {

    // "Ban" spaces in username field
    $("input#Username").on({

       // When a new character was typed in
       keydown: function(e) {

          // 32 - ASCII for Space;
          // `return false` cancels the keypress
          if (e.which === 32)
             return false;
       },

       // When spaces managed to "sneak in" via copy/paste
       change: function() {
          // Regex-remove all spaces in the final value
          this.value = this.value.replace(/\s/g, "");
       }

       // Notice: value replacement only in events
       //  that already involve the textbox losing
       //  losing focus, else caret position gets
       //  mangled.
    });​​​​​
});
5
Lightness Races in Orbit

Essayez de vérifier le code clé approprié dans votre fonction:

$(function(){
    var txt = $("input#UserName");
    var func = function(e) {
      if(e.keyCode === 32){
        txt.val(txt.val().replace(/\s/g, ''));
      }
    }
    txt.keyup(func).blur(func);
});

De cette façon, seul le keyCode de 32 (un espace) appelle la fonction de remplacement. Cela permettra aux autres keypress événements de passer. En fonction de la comparabilité dans IE, vous devrez peut-être vérifier si e existe, utilisez e.which, ou peut-être utiliser l'objet global window.event. Il y a beaucoup de questions ici qui couvrent de tels sujets.

Si vous n'êtes pas sûr d'un certain keyCode essayez ceci utile site .

1
Chase