JS:添加了实时新元素的默认文本交换

Question

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

      <输入类 类型="文本" 值="输入您的电子邮件" />
    

   if（$（'.js_text_swap'）.length> 0） {        $（'.js_text_swap'）.each（function（） {            var 那 = $（这个），                值 = that.val（）;记住默认值            that.focusin（function（） {                if（that.val（） === value） {                    that.val（''）;                }            });            that.focusout（function（） {                if（that.val（） === ''） {                    that.val（value）;                }            });        });    }

---

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

谢谢

Answer 1

Jap！

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

演示