jQuery检索和比较文本输入

Question

我尝试使用 jQuery 检查文本输入的值是否已更改，如果匹配，则检查是否与预定义的单词匹配。我试图使用.focusout()检测更改，正如this answer建议的那样，没有成功。我能够检测到更改，但我无法将该更改与预定义的单词进行比较。有可能用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()

即可

＆＃13;

＆＃13;

 $(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
     }
   });
 });

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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设置为您的值。