Wordpress 内联标签 (jQuery)答案

【问题标题】：Wordpress inline label (jQuery)Wordpress 内联标签 (jQuery)
【发布时间】：2009-12-21 21:44:02
【问题描述】：

我正在构建我的新主题，但遇到了问题。我使用 jQuery 将输入的标签显示到输入中：

this.label2value = function(){  

    var inactive = "inactive";
    var active = "active";
    var focused = "focused";

    $("label").each(function(){
        obj = document.getElementById($(this).attr("for"));
        if(($(obj).attr("type") == "text") || (obj.tagName.toLowerCase() == "textarea")){
            $(obj).addClass(inactive);
            var text = $(this).text();
            $(this).css("display","none");
            $(obj).val(text);
            $(obj).focus(function(){
                $(this).addClass(focused);
                $(this).removeClass(inactive);
                $(this).removeClass(active);
                if($(this).val() == text) $(this).val("");
            });
            $(obj).blur(function(){
                $(this).removeClass(focused);
                if($(this).val() == "") {
                    $(this).val(text);
                    $(this).addClass(inactive);
                } else {
                    $(this).addClass(active);
                };
            });
        };
    });
};
$(document).ready(function(){
    label2value();
});

但是，问题是当我提交通讯时，如果没有网站 url，WP 使用标签作为 URL (http://YourWebsiteURL)。

我该如何解决这个问题？

【问题讨论】：

标签： jquery wordpress forms

【解决方案1】：

您的代码用它们的标签填充输入，因此它们最终被提交到服务器。

干净的解决方案是停止玩弄输入值，使用 CSS 将标签移动到输入下方（相同的位置，较低的 z-index），并使用 jQuery 在输入上添加/删除透明背景，具体取决于关于它们是否处于焦点和/或空的状态。

这样，如果标签为空且不在焦点下，您可以通过输入看到标签

鉴于您现有的代码，快速而肮脏的解决方案是设置表单的提交事件，以便在提交表单时清除包含其自己标签文本的任何字段。

【讨论】：

喜欢透明BG的想法。谢谢。

【解决方案2】：

为什么要重新发明轮子，虽然有很棒的插件可以做到这一点，labelify。它可以使用字段的原始标签作为字段内显示的文本。只需查看插件页面中的示例即可。

【讨论】：