jQuery - Changer le fond du champ de saisie si le texte se remplace

Question

J'utilise actuellement jQuery pour restreindre une zone de texte au numéro d'entrée seulement comme suit:

$('input.numbersOnly').keyup(function() { 
     this.value = this.value.replace(/[^0-9\.]/g,''); 
    }); 

Je voudrais informer l'utilisateur que ce ils sont en train d'être rejetés en changeant la couleur d'arrière-plan du champ. Je sais que je peux changer l'arrière-plan d'un champ en utilisant quelque chose comme ceci:

 $('input.numbersOnly').addClass('alertClass'); 

Ma question est, comment puis-je combiner les deux exemples de code ci-dessus afin que la couleur des changements sur le terrain que le personnage est maintenant remplacé ? Mon but est d'alerter l'utilisateur que quelque chose ne va pas dans sa saisie lorsqu'il le tape sur le terrain.

Merci!

Answer 1

Vous pouvez faire quelque chose comme ceci:

$('input.numbersOnly').keyup(function() { 
    var newValue = this.value.replace(/[^0-9\.]/g,''); 
    if(this.value !== newValue) $(this).addClass('alertClass'); 
    this.value = newValue; 
}); 

Cette saisit la nouvelle valeur, détermine si vous remplacez en fait quelque chose, et si ajoute ainsi le alertClass. Si vous voulez supprimer également la classe d'une valeur keyup valide, vous pouvez utiliser .toggleClass(), comme ceci:

$('input.numbersOnly').keyup(function() { 
    var newValue = this.value.replace(/[^0-9\.]/g,''); 
    $(this).toggleClass('alertClass', this.value !== newValue); 
    this.value = newValue; 
}); 

Ce serait basculer la classe avec un keyup invalide, ce qui provoque un ajustement de valeur et togle hors tension si la dernière pression sur une touche était valide, ce qui n'entraînait aucun ajustement.

Answer 2

Comme ceci:

$('input.numbersOnly').keyup(function() { 
    var oldVal = this.value; 
    this.value = this.value.replace(/[^0-9\.]/g,''); 
    if (oldVal !== this.value) 
     $(this).addClass('alertClass') 
});