Question

我正在使用Gravity Forms，需要将标签用作占位符文本。有几个WordPress插件，但它们并不总是有效。我还找到了一个在Gravity Forms表单构建器中添加占位符字段的解决方案，但我真的不需要它。

我要做的是使用jQuery获取标签文本并将该文本指定为输入的占位符属性。我在这里使用next（）但它只在输入没有包含在div中时才有效，我明白了。重力形式不会那样。

这是我的代码，你会看到第一个字段输入包含在div中，因此，没有得到占位符

<!DOCTYPE html>
<html>
<head>
    <title>Placeholder</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
    <div class="form">
        <ul>
            <li id="field_1" class="gfield">
               <label>First Name</label>
               <div><input class="first" type="text" /></div>
            </li>
            <li id="field_2" class="gfield">
                <label>Last Name</label>
               <input class="last" type="text" />
            </li>
            <li id="field_3" class="gfield">
                <label>Email</label>
               <input type="text" />
            </li>
        </ul>
    <input type="submit" value="Submit" />
    </div>
</body>
     <script>
        $("label").each(function() {
            var label = $(this);
            var placeholder = label.text();
            label.next("input").attr("placeholder", placeholder).val("").focus().blur();
        });
    </script>
</html>

JS小提琴：http://jsfiddle.net/jsoningram/ezohpxq6/

提前致谢。

Answer 1

如果每个li元素只有一个标签和输入，您可以使用.closest() method和.find() method来执行以下操作：

$("label").each(function() {
    var label = $(this);
    var placeholder = label.text();
    label.closest(".gfield").find("input").attr("placeholder", placeholder).val("").focus().blur();
});

演示：http://jsfiddle.net/ezohpxq6/2/

（或者，如果您的标签元素具有引用相关输入的for=""属性，您可以在jQuery代码中使用该属性，但这将涉及更改html。但它会使标签上的点击“起作用”。）

当输入包装在div中时，从表单标签创建html5占位符

1 个答案: