jQuery 检索和比较文本输入

Question

我尝试使用 jQuery 来检查文本输入的值是否已更改，如果已更改，是否与预定义的单词匹配。正如this answer 建议的那样，我尝试使用.focusout() 来检测变化，但没有成功。我能够检测到更改，但无法将该更改与预定义的单词进行比较。是否可以使用 jQuery 来做到这一点，如果可以，怎么做？

 $(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>

谢谢！

Answer 1

不要使用.attr('value')，而是使用.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>

Answer 2

如果值已更改，请再次设置 last 值。而且您没有指定任何起始值，因此您的起始值将为空。

 $(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>

Answer 3

$(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>

基本上，您从一个空字符串作为“最后一个代码”开始，然后在关注焦点时，将您的值与您的 lastWord 进行比较，如果这些匹配，则没有任何变化。完成比较后，将 lastWord 设置为您的值。