0

因此，对于输入（或其他类型的 el）上的默认文本交换，我有这个片段

    <input class="js_text_swap" type="text" value="输入你的邮箱" />


    if($('.js_text_swap').length > 0) {
        $('.js_text_swap').each(function() {
            var that = $(this),
                值 = that.val(); // 记住默认值

            那.focusin（函数（）{
                如果（that.val() === 值）{
                    that.val('');
                }
            });
            那.focusout（函数（）{
                if(that.val() === '') {
                    那.val（值）；
                }
            });
        });
    }

所以我的问题是：
1）有人对此有更好的解决方案吗？
2)有谁知道如何使用实时添加的元素（在页面加载后添加 js）使这项工作？

谢谢

4

1 回答 1

1

日本鬼子！

HTML

<input placeholder="Click..." class="text" type="text">

CSS

.text{color:#aaa}
.text.focus{color:#444}

JS

$("input[placeholder]").each(function() {
    var placeholder = $(this).attr("placeholder");

    $(this).val(placeholder).focus(function() {
        if ($(this).val() == placeholder) {
            $(this).val("").addClass('focus');
        }
    }).blur(function() {
        if ($(this).val() === "") {
            $(this).val(placeholder).removeClass('focus');
        }
    });
});

http://yckart.com/jquery-simple-placeholder/

更新

要使其与 ajax 或类似的工作一起使用，您需要将其转换为“插件”并在您成功的 ajax 请求之后（或在动态创建废话之后）调用它。

像这样的东西（非常简单的例子）：

jQuery.fn.placeholder = function() {
    return this.each(function() {
        var placeholder = $(this).attr("placeholder");

        $(this).val(placeholder).focus(function() {
            if ($(this).val() == placeholder) {
                $(this).val("").addClass('focus');
            }
        }).blur(function() {
            if ($(this).val() === "") {
                $(this).val(placeholder).removeClass('focus');
            }
        });
    });
};

$("input:text, textarea").placeholder();

$("button").on("click", function() {
    $(this).before('<input type="text" placeholder="default value" />');
    $("input:text, textarea").placeholder();
});

演示

于 2012-09-25T00:57:12.423 回答