如何用jQuery为WordPress表单标签添加对应for属性的类以隐藏文本

你已经搞定了placeholder的设置，接下来给添加对应for属性值的类非常简单，只需要遍历目标标签并动态添加类名即可。

修改后的jQuery代码 #

把这段新增逻辑整合到你现有的代码里：

jQuery(document).ready(function(){
    // 你已有的placeholder设置
    jQuery('#user_login').attr('placeholder', 'Name');
    jQuery('#user_email').attr('placeholder', 'Email');
    jQuery('#user_pass').attr('placeholder', 'Password');

    // 新增：为带for属性的label添加对应类名
    jQuery('label[for]').each(function(){
        // 获取当前label的for属性值
        var targetId = jQuery(this).attr('for');
        // 将该值作为类名添加到label上
        jQuery(this).addClass(targetId);
    });
});

代码解释 #

• jQuery('label[for]')：精准选中所有带有for属性的元素，这样就不会误操作那个人机验证的无for属性标签
• .each()：遍历每个选中的label，逐个处理
• jQuery(this).attr('for')：获取当前label绑定的表单元素ID（比如user_login）
• .addClass(targetId)：把这个ID作为类名添加到label，最终label会变成<label for="user_login" class="user_login">...</label>

隐藏标签文本的CSS #

类名添加完成后，你可以用CSS来隐藏标签文本，推荐使用兼顾可访问性的隐藏方式（屏幕阅读器仍能读取文本）：

/* 隐藏指定类的标签文本 */
label.user_login,
label.user_pass,
label.rememberme {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

额外提示 #

• 这种方法会自动处理所有带for属性的label，包括“记住我”的标签，如果你不想隐藏某个标签，只需在CSS里去掉对应的类选择器即可
• 避免使用display: none隐藏标签，因为部分屏幕阅读器会忽略这类元素，影响网站可访问性

内容的提问来源于stack exchange，提问作者Lust