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

Question

我想将输入元素的标签放在由 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 短代码，但要求不再有效

Answer 1

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

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

.wpcf7-form-control:focus + .label-helper{color: 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>
    

Answer 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);
            }   
        }   
    }