Javascript 内场标签不会在空场上重新出现

我有下面的代码jquery插件，它基于很久以前的一个插件（这里演示：），允许标签根据用户输入的字段淡入淡出

当用户聚焦时，标签会淡出50%，如果模糊，标签会重新淡出。当他们开始键入时，标签将完全隐藏。然后，如果字段为空，它们再次模糊，则标签会重新淡入

问题是，当字段聚焦且用户删除该值时，它不会再次显示50%的标签，直到模糊字段（取消聚焦）

有人能帮我修一下吗

---

谢谢

您要做的是监听

键控

事件，并检查您的

输入

在每次

键控

时是否为空。如果是，则您将

fadeIn

您的标签。

在

keydown.infeldlabel

事件处理程序中，您有以下调用：

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

事件处理停止；可能您的backspace或delete键不再附加事件处理，因为该事件未绑定。

试试这个，工作正常

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

---

你有什么特别的地方需要帮助吗？看看你的代码，它只是没有编码来处理你描述的场景。它会在隐藏标签后立即解除keydown事件的绑定，因此在调用blur事件之前，您不会再次看到标签。我开始做一些改变，但是我认为所需要的改变远远超出了我对SO答案的理解。是的，我在我的问题中提到了这一点。关于如何解决这个问题，有什么想法吗？感谢您必须修改代码，以检查keydown上的正确值（实际上使用keydup更好）。所需的修改对于SO问题来说太过广泛（至少对我而言）。

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