内字段标签不会在空字段上重新出现

Infield label not reappearing on empty field

本文关键字：字段 新出现 标签      更新时间：2023-09-26

我有以下代码jquery插件，它基于不久前的一个插件(此处演示：http://jsfiddle.net/3rNpb/(，它允许标签根据用户输入字段来淡入和淡出。

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

问题是，当字段聚焦并且用户删除值时，它不会再次以 50% 显示标签，直到他们模糊字段(取消焦点(。

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

谢谢

在 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事件处理停止;也许您不再为退格键或删除键附加事件处理，因为事件是未绑定的。

试试这个，工作正常

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

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

相关文章：