Question

这应该发生
如果用户单击两个输入框之一，则应删除默认值。当用户点击网页上的elswhere并且一个文本字段为空时，应该使用spefic元素的data-default属性中的默认值填充它。

发生这种情况
当某人点击页面上某处并且该字段为空时，该字段将填充正确的值，但当有人再次点击该字段时，文本不会被删除。似乎$(document)点击事件阻止了$(".login-input")点击事件，因为$(".login-input")正在运行而没有$(document)点击事件。

的jsfiddle
我在这里提供了一个问题示例：JSFiddle

坦克你的帮助！

Answer 1

当您单击输入时，脚本正在运行，但由于输入位于文档中，因此单击输入即可单击文档。两个函数都将符文，文档是最后一个。

这称为事件冒泡，您需要停止传播：

$(document).ready(function () {
    $(".login-input").click(function (e) {
        e.stopPropagation()
        $(this).val("");
    });
});

小提琴：http://jsfiddle.net/kLQW9/3/

Answer 2

根本不是你如何解决占位符，你这样做是这样的：

$(document).ready(function () {
    $(".login-input").on({
        focus: function () {
            if (this.value == $(this).data('default')) this.value = '';
        },
        blur: function() {
            if (this.value == '') this.value = $(this).data('default');
        }
    });
});

FIDDLE

如果真正的旧浏览器不是问题，最好使用HTML5占位符属性。

修改

如果您决定同时执行这两项操作，请在应用javascript之前检查浏览器中对占位符的支持：

var i = document.createElement('input'), hasPlaceholders = 'placeholder' in i; if (!hasPlaceholders) { // place the code above here, the condition will // fail if placeholders aren't supported }

Answer 3

尝试以下代码

$(document).ready(function () {
    $(".login-input").click(function () {
        $(this).val("");

    });
});
$(document).ready(function () {

    $(".login-input").each(function () {
        if ($(this).val() === "") {
            $(this).val($(this).attr("data-default"));
        }
    });
    $(".login-input").blur(function () {
        if ($(this).val() === "") {
            $(this).val($(this).attr("data-default"));
        }
    });

});

检查fiddle

Answer 4

为什么不使用焦点和模糊事件？

$(document).ready(function () {
    $(".login-input").focus(function () {
        $(this).val("");
    });
});
$(document).ready(function () {    
    $(".login-input").blur(function () {
        if ($(this).val() === "") {
            $(this).val($(this).attr("data-default"));
        }
    });    
});

http://jsfiddle.net/kLQW9/5/

P.S。在你的，以及这段代码中，焦点将清除输入的所有数据。如果您只需要清除默认文本，请为其添加适当的条件。

全局单击事件阻止元素的单击事件

4 个答案: