带有 blur() 和 focus() 的输入字段

Question

我正在构建一个自定义联系表单。我所有的输入字段都有一个 mouseenter/mouseleave 和焦点/模糊动画（背景颜色）。我的问题在于模糊（）和焦点（）。 这是名称字段的代码：

  $('#userName').on('mouseenter', function(){
    if($.trim($(this).val()) == ""){
     $('#userName').animate({'background-color':'#FECC00'}, 200);
    }
  });

  $('#userName').on('mouseleave', function(){
    if($.trim($(this).val()) == ""){
      $(this).stop(true).animate({'background-color':'#ffffff'}, 200);
    }
  });

  $('#userName').focus(function(){
    $(this).animate({'background-color':'#B0CB1F'}, 200);

  });

  $('#userName').blur(function(){
    $(this).animate({'background-color':'#ffffff'}, 200);
    if($.trim($(this).val()) == ""){
      nameInvalidation();
    }
    else{
      nameValidation();
    }
  });

nameInvalidation() 和 nameInvalidation() 是一些动画复选标记：

• nameInvalidation()：灰色复选标记 - 需要填写输入字段 - 这是所有输入字段的默认值；
• nameValidation()：绿色复选标记 - 字段数据已准备好发送；

当我输入输入字段并且什么都不做时，nameInvalidation() 运行；当我输入一些内容时，nameValidation() 运行 - 所以我知道该字段是否准备好。 问题是这样的：

• 如果我输入了输入字段并且它是空的
• 如果我把它留空
• 如果我写了一些东西，但在离开输入字段之前删除了它

...比 nameInvalidation() 动画不应该运行，因为它已经是默认设置了。

当字段作为一些数据并且我进入它，更改或离开时，同样的事情......绿色复选标记再次运行。

我尝试使用 keyup()，它在一定程度上起作用，但它在每次击键时运行复选标记动画 - 我只在离开现场时才想要它。

这是Fiddle。

佩德罗

Answer 1

创建一个保存被调用方法当前状态的变量

查看modified jsfiddle

    var currentValidationMethodMane;
    function nameValidation(){
        if(currentValidationMethodMane == "nameValidation"){
            return;
        }
        currentValidationMethodMane = "nameValidation";
   .........

function nameInvalidation(){
        if(currentValidationMethodMane == "nameInvalidation"){
        return;
    }
    currentValidationMethodMane = "nameInvalidation";

.....