Question

我有以下代码jquery插件，该插件基于前一段时间（此处演示：http://jsfiddle.net/3rNpb/），允许标签根据用户输入字段淡入淡出。

当用户聚焦时，标签会淡出50％，如果模糊，则会退回。当他们开始输入时，标签完全隐藏。然后，如果该字段为空并且它们再次模糊，那么标签将重新淡入。

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

有人可以帮忙解决这个问题吗？

由于

Answer 1

在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调用会导致keydown事件处理停止;也许你没有为退格或删除密钥附加事件处理，因为事件是未绑定的。

Answer 2

试试这个，工作正常

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

Answer 3

您要做的是听取keyup事件，并检查每个input上keyup是否为空。如果是，那么您fadeIn是您的标签。

内场标签没有出现在空场上

3 个答案: