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

用户名

我正在使用重力形式，需要将标签用作占位符文本。有几个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/

提前致谢。，

nnnnnn

如果每个li元素只有一个标签，并输入您可以使用.closest()方法连同.find()方法做这样的事情：

$("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。但这将使标签“起作用”。）

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。