Je travaille sur un script qui détectera si un champ d'entrée est plus grand qu'un autre pendant que l'utilisateur tape.
J'ai donc deux champs d'entrée: longueur et largeur. Lorsque l'utilisateur tape "1" dans la longueur, puis "2" dans la largeur, le bouton d'envoi doit être grisé car la longueur est plus courte que la largeur. S'ils ont ensuite tapé "12" dans la longueur sans modifier le champ de largeur, cela devrait valider et rendre le bouton d'envoi cliquable.
Mon problème avec mon code est que la première entrée dans le champ n'est pas enregistrée. Par exemple, si je console.log le champ de saisie, la première pression de touche est enregistrée comme "NaN".
J'ai joint un jsfiddle de mon travail jusqu'à présent, vous pouvez voir que si vous entrez un nombre dans l'un des champs, rien ne se met à jour dans le HTML. Cependant, si vous tapez ensuite un autre nombre, vous voyez la valeur du champ 1 étape plus tôt.
J'espère que cela a du sens et j'espère que quelqu'un pourra m'aider avec ceci
https://jsfiddle.net/smyckdb8/
Javascript:
<p>
Length
</p>
<input type="number" class="length-field">
<p>
Width
</p>
<input type="number" class="width-field">
<p class="length">length is <span></span></p>
<p class="width">width is <span></span></p>
<p class="result"></p>
HTML:
jQuery(document).ready(function ($) {
$('input').on('keypress', function (e) {
$('p.length span').html(parseInt($(".length-field").val()));
$('p.width span').html(parseInt($(".width-field").val()));
if (parseInt($(".length-field").val()) > parseInt($(".width-field").val())) {
$('.result').html('L > W');
};
if (parseInt($(".length-field").val()) < parseInt($(".width-field").val())) {
$('.result').html('W > L');
};
});
});
4 Réponses :
Utilisez l'événement keyup au lieu de keypress
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> Length </p> <input type="number" class="length-field"> <p> Width </p> <input type="number" class="width-field"> <p class="length">length is <span></span></p> <p class="width">width is <span></span></p> <p class="result"> </p>
jQuery(document).ready(function($){
$('input').on('keyup', function(e){
$('p.length span').html(parseInt($(".length-field").val()));
$('p.width span').html(parseInt($(".width-field").val()));
if( parseInt($(".length-field").val()) > parseInt($(".width-field").val()) ){
$('.result').html('L > W');
};
if( parseInt($(".length-field").val()) < parseInt($(".width-field").val()) ){
$('.result').html('W > L');
};
});
});
Parfait, merci. Quelle est la raison du keyup plutôt que du keypress?
Keypress vérifie le champ lorsque la touche est enfoncée, avant que la valeur n'ait été entrée dans le champ. Keyup le fait vérifier le champ lorsque la touche est relâchée et puisque le champ est rempli lorsque la touche est enfoncée, il contient une valeur au keyup et non en appuyant sur la touche.
L'événement Keypress se produit avant le changement d'entrée. Mais Keyup se produit après le changement. Ainsi, une pression sur la touche affiche l'entrée précédente sur la suivante tandis que la touche keyup s'affiche en même temps. Si cela vous a aidé à marquer la réponse comme correcte afin que cela puisse également aider les autres
Vous pouvez utiliser l'événement input :
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <p>Length</p> <input type="number" class="length-field"> <p>Width</p> <input type="number" class="width-field"> <p class="length">length is <span></span></p> <p class="width">width is <span></span></p> <p class="result"></p>
Il se déclenchera lorsque vous entrez une nouvelle valeur dans l'une ou l'autre des entrées.
De plus, cela fonctionnera également lorsque vous incrémenterez l'entrée en utilisant les boutons d'incrémentation d'entrée (ainsi que si vous collez un nombre). L'événement keypress se déclenchera avant que la valeur ne soit entrée dans votre zone de texte (vous empêchant de lire la première valeur saisie)
Voir l'exemple ci-dessous:
$(document).ready(function($) {
$('input').on('input', function(e) {
$('p.length span').html(parseInt($(".length-field").val()));
$('p.width span').html(parseInt($(".width-field").val()));
if (parseInt($(".length-field").val()) > parseInt($(".width-field").val())) {
$('.result').html('L > W');
};
if (parseInt($(".length-field").val()) < parseInt($(".width-field").val())) {
$('.result').html('W > L');
};
});
});
// ------------ \/
$('input').on('input', function(e) {
// code...
}
Vous pouvez utiliser l'événement keyup et également utiliser le repli et définir la valeur sur 0 si l'entrée est vide ou si une valeur non numérique est présente. voir ci-dessous le code
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <p> Length </p> <input type="number" class="length-field"> <p> Width </p> <input type="number" class="width-field"> <p class="length">length is <span></span></p> <p class="width">width is <span></span></p> <p class="result"> </p>
jQuery(document).ready(function($){
$('input').on('keyup', function(e){
var length = parseInt($(".length-field").val()) || 0;
var width = parseInt($(".width-field").val()) || 0;
$('p.length span').html(length);
$('p.width span').html(width);
if( length > width ){
$('.result').html('L > W');
};
if(length < width ){
$('.result').html('W > L');
};
});
});
Utilisez keyup au lieu de keypress car pendant keypress , le champ de saisie est toujours vide.
Vous pouvez également éviter d'utiliser parseInt plusieurs tmes et ne l'utilisez qu'une seule fois au début
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <p> Length </p> <input type="number" class="length-field"> <p> Width </p> <input type="number" class="width-field"> <p class="length">length is <span></span></p> <p class="width">width is <span></span></p> <p class="result"> </p>
jQuery(document).ready(function($) {
$('input').on('keyup', function(e) {
let ipLength = parseInt($(".length-field").val(), 10);
let ipWidth = parseInt($(".width-field").val(), 10);
$('p.length span').html(ipLength);
$('p.width span').html(ipWidth);
ipLength > ipWidth && $(".result").html("L > W");
ipLength < ipWidth && $(".result").html("W > L");
});
});
Utilisez la propriété defaultValue pour définir la valeur initiale de deux champs sur 0 au lieu de vide, ce qui donne NaN