Question

我正在构建自定义联系表单。我的所有输入字段都有一个mouseenter / mouseleave和focus / blur动画（background-color）。我的问题代表着blur（）和focus（）。这是Name字段的代码：

  $('#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";

.....

带有blur（）和focus（）的输入字段

1 个答案: