内场标签不再出现在空字段

-1

我有以下代码jquery插件，它是基于一段时间后（这里演示：http://jsfiddle.net/3rNpb/），允许标签淡入和淡出的基础上，用户输入一个字段。内场标签不再出现在空字段

当用户对焦时，标签淡出50％，如果模糊，则返回。当他们开始打字时，标签完全隐藏。然后，如果该字段为空，并且它们再次模糊，则该标签将淡入。

问题是，当字段关注并且用户删除该值时，它不会再显示50％的标签，直到它们模糊该领域（未聚焦）。

任何人都可以帮助解决这个问题吗？

感谢

2011-12-27 Cameron

有你想帮助一些特定的一部分吗？看看你的代码，它只是没有编码来处理你描述的情况。它在隐藏标签后立即取消绑定keydown事件，因此在模糊事件被调用之前您不会再看到标签。我开始进行更改，但所需的更改比我认为适合SO回答的更多。 – BNL 2011-12-27 19:07:22

是的，我在我的问题中提到它。 – Cameron 2011-12-27 19:27:26

-1

你想要做什么是侦听keyup事件和检查，看看是否你的input是在每个keyup空。如果是，那么你fadeIn你的标签。

来源

2011-12-27 19:12:45

在你keydown.infieldlabel事件处理程序中，你有这样的电话：

f.hideOnChange(e)

...和你hideOnChange功能包含此代码：

f.hideOnChange = function (e) { 
    if ((e.keyCode == 16) || (e.keyCode == 9)) return; 
    if (f.showing) { 
     f.$label.hide(); 
     f.showing = false 
    }; 
    f.$field.unbind('keydown.infieldlabel') 
};

它看起来对我来说，unbind呼叫在你的函数结束将导致事件处理停止;也许您没有为您的退格键或删除键添加事件处理，因为事件没有被绑定。

来源

2011-12-27 19:13:34 Jacob

有关如何解决此问题的任何想法？谢谢 – Cameron 2011-12-27 19:30:19

你将不得不修改你的代码来检查keydown上的正确值（keyup实际上更好用）。所需的修改对于SO问题来说太广泛了（至少对我而言）。 – BNL 2011-12-27 19:41:31

试试这个，做工精细

<label class="placeholder" for="test">Test Label</label> 
<input type="text" id="test" />

(function ($) { 
    $.InFieldLabels = function (b, c, d) { 
     var f = this; 
     f.$label = $(b); 
     f.label = b; 
     f.$field = $(c); 
     f.field = c; 
     f.$label.data("InFieldLabels", f); 
     f.showing = true; 
     f.init = function() { 
      f.options = $.extend({}, $.InFieldLabels.defaultOptions, d); 
      if (f.$field.val() != "") { 
       f.$label.hide(); 
       f.showing = false 
      }; 
      f.$field.focus(function() { 
       f.fadeOnFocus() 
      }).blur(function() { 
       f.checkForEmpty(true) 
      }).bind('keydown.infieldlabel', function (e) { 
       f.hideOnChange(e) 
      }).change(function (e) { 
       f.checkForEmpty() 
      }).bind('onPropertyChange', function() { 
       f.checkForEmpty() 
      }) 
     }; 
     f.fadeOnFocus = function() { 
      if (f.showing) { 
       f.setOpacity(f.options.fadeOpacity) 
      } 
     }; 
     f.setOpacity = function (a) { 
      f.$label.stop().animate({ 
       opacity: a 
      }, f.options.fadeDuration); 
      f.showing = (a > 0.0) 
     }; 
     f.checkForEmpty = function (a) { 
      if (f.$field.val() == "") { 
       f.prepForShow(); 
       f.setOpacity(a ? 1.0 : f.options.fadeOpacity) 
      } else { 
       f.setOpacity(0.0) 
      } 
     }; 
     f.prepForShow = function (e) { 
      if (!f.showing) { 
       f.$label.css({ 
        opacity: 0.0 
       }).show(); 
       f.$field.bind('keydown.infieldlabel', function (e) { 
        f.hideOnChange(e) 
       }) 
      } 
     }; 
     f.hideOnChange = function (e) { 
      if ((e.keyCode == 16) || (e.keyCode == 9)) return; 
      if (f.showing) { 
       f.$label.hide(); 
       f.showing = false 
      }; 
      f.$field.unbind('keydown.infieldlabel') 
     }; 
     f.init() 
    }; 
    $.InFieldLabels.defaultOptions = { 
     fadeOpacity: 0.5, 
     fadeDuration: 300 
    }; 
    $.fn.inFieldLabels = function (c) { 
     return this.each(function() { 
      var a = $(this).attr('for'); 
      if (!a) return; 
      var b = $("input#" + a + "[type='text']," + "input#" + a + "[type='password']," + "input#" + a + "[type='email']," + "input#" + a + "[type='tel']," + "textarea#" + a); 
      if (b.length == 0) return; 
      (new $.InFieldLabels(this, b[0], c)) 
     }) 
    } 
})(jQuery); 

$("label.placeholder").inFieldLabels();

来源

2013-10-31 12:29:01

内场标签不再出现在空字段

回答

相关问题