1

我正在构建一个自定义联系表单。我所有的输入字段都有一个 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() 并且它在某种程度上起作用，但它在每次击键时运行复选标记动画 - 我只在离开现场时才想要它。

这是一个小提琴。

佩德罗

4

1 回答 1

0

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

检查修改后的 jsfiddle

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

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

.....
于 2013-04-11T18:22:33.670 回答