如何在跨度元素 wpcf7-form-control-wrap 内放置标签

Posted 2023-05-09

【中文标题】如何在跨度元素 wpcf7-form-control-wrap 内放置标签

【英文标题】：How to place label inside the span element wpcf7-form-control-wrap

【发布时间】：2019-11-17 12:28:14

【问题描述】：

我想将输入元素的标签放在由 cf7 短代码生成的 span 元素内 - 可以吗？

我想这样做的原因是我试图让标签只在输入字段有 :focus 时出现

为了做到这一点，标签和输入需要在同一个元素内，这样我就可以使用以下 css 选择器来定位：

input-ID:focus + .label-class

我尝试将生成的 html 标记粘贴到 CF7 中并将标签移动到内部（而不是使用简码），这可以实现我想要的，但是它会导致一个奇怪的问题，即“必需”属性不再起作用 - 所有字段是必需的，但现在可以空提交表单

这是 CF7 生成的：

<span class="wpcf7-form-control-wrap your-name-wrap">
<input type="text" name="your-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" id="your-name-1" aria-required="true" aria-invalid="false" placeholder="Name"></span>
<label for="your-name" class="label-helper">Name</label>

这就是我想要的：

<span class="wpcf7-form-control-wrap your-name-wrap">
<input type="text" name="your-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" id="your-name-1" aria-required="true" aria-invalid="false" placeholder="Name">
<label for="your-name" class="label-helper">Name</label></span>

我尝试实现上面的 HTML 而不是使用 CF7 短代码，但要求不再有效

【参考方案1】：

请检查它可能会有所帮助。我认为您在每个函数中或通过循环都使用了..

var getLabel = $(".wpcf7-form-control-wrap").next("label").detach();
        $(".wpcf7-form-control-wrap").append(getLabel);

.wpcf7-form-control:focus + .label-helpercolor: red;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="wpcf7-form-control-wrap your-name-wrap">
<input type="text" name="your-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" id="your-name-1" aria-required="true" aria-invalid="false" placeholder="Name"></span>
<label for="your-name" class="label-helper">Name</label>
    

【讨论】：

谢谢 - 如果我手动输入 HTML（而不是使用 CF7 短代码），我可以看到这有效......但由于某种原因，如果我使用短代码生成表单字段 - 那么这个 jquery 不会工作（我添加到页面顶部） - 知道为什么会这样吗？

【参考方案2】：

这对我有用

    var spans = document.getElementsByClassName("wpcf7-form-control-wrap");
    for(var i=0;i<spans.length;i++)
    
        var input = spans[i].nextSibling;
        if(input != null)
        
            if(input.tagName == "LABEL")
            
                spans[i].appendChild(input);