jQuery Récupération et comparaison de l'entrée de texte

Question

J'ai essayé d'utiliser jQuery pour vérifier si la valeur d'une entrée de texte a changé, et si oui, si elle correspond à un mot prédéfini. J'ai essayé d'utiliser .focusout() pour détecter les changements, comme conseille cette réponse, sans succès. J'ai pu détecter un changement, mais je n'ai pas pu comparer ce changement au mot prédéfini. Est-il possible de le faire avec jQuery, et si oui, comment?

 $(document).ready(function() {
   var code = $('#code');

   // Save the initial value
   $.data(code, "last", code.val());

   // Setup the event
   code.focusout(function() {
     var last = $.data(code, "last");
     if (last != $(this).val())
       alert("changed");
     var value = $("#code").attr('value');
     if (value === "CODE") {
       $(".upper").slideUp(1000);
       $(".lower").slideUp(1000);
       $(".main").css({
         left: -1000
       });
       $(".test").css({
         color: green
       }); //Testing Property
     }
   });
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" placeholder="ENTER" class="input" id="code">

<p class="test">Does it work?</p>

Merci!

javascript jquery text input

0

John 9 mars 2016 à 05:41

Answer 1

Au lieu d'utiliser .attr('value'), utilisez simplement .val()

 $(document).ready(function() {
   var code = $('#code');

   // Save the initial value
   $.data(code, "last", code.val());

   // Setup the event
   code.focusout(function() {
     var last = $.data(code, "last");
     if (last != $(this).val())
       alert("changed");
     var value = $("#code").val();
     if (value === "CODE") {
       alert("CODE!");
       $(".upper").slideUp(1000);
       $(".lower").slideUp(1000);
       $(".main").css({
         left: -1000
       });
       $(".test").css({
         color: green
       }); //Testing Property
     }
   });
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" placeholder="ENTER" class="input" id="code">

<p class="test">Does it work?</p>

2

Jon 9 mars 2016 à 02:48

Answer 2

$(document).ready(function() {
	var code = $('#code');
	var lastWord = "";	

   // Setup the event
   code.focusout(function() {
     var value = $("#code").attr('value');
     if(value === lastWord){
     	alert("No change");
     }else{
     	alert("Change")
     }
     lastWord = value;
   });
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" placeholder="ENTER" class="input" id="code">

<p class="test">Does it work?</p>

Fondamentalement, vous commencez avec une chaîne vide comme votre «dernier code», puis en vous concentrant sur, vous comparez votre valeur à votre dernier mot, si ces correspondances, il n'y avait aucun changement. Lorsque vous avez terminé la comparaison, vous définissez votre lastWord sur votre valeur.

-1

Xposedbones 9 mars 2016 à 02:49

Answer 3

Définissez à nouveau la valeur last si la valeur a changé. Et vous n'avez spécifié aucune valeur de départ, donc votre valeur de départ sera vide.

 $(document).ready(function() {
   var code = $('#code');

   // Save the initial value
   $.data(code, "last", code.val());

   // Setup the event
   code.focusout(function() {
     var last = $.data(code, "last");
     if (last != $(this).val()){
       $.data(code, "last", code.val());
       alert("changed");
     }
     var value = $("#code").attr('value');
     if (value === "CODE") {
       $(".upper").slideUp(1000);
       $(".lower").slideUp(1000);
       $(".main").css({
         left: -1000
       });
       $(".test").css({
         color: green
       }); //Testing Property
     }
   });
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" placeholder="ENTER" class="input" id="code">

<p class="test">Does it work?</p>

0

Adrian 9 mars 2016 à 02:50

jQuery Récupération et comparaison de l'entrée de texte

3 réponses

Questions connexes

Questions liées

De nouvelles questions

javascript