联系表格 7 自动选项卡到下一个字段

Posted 2023-05-09

【中文标题】联系表格 7 自动选项卡到下一个字段

【英文标题】：contact form 7 auto tab to next field

【发布时间】：2021-12-12 05:26:36

【问题描述】：

我正在使用联系表 7 进行问卷调查，其中一个问题询问出生日期。我尝试使用日期选择器和文本输入字段来自动格式化日期，但它不会按照我想要的方式工作。日期选择器不会将年份限制为 4 位数字，并且文本输入不会正确格式化为 MM / DD / YYYY 所以我所做的是创建了 3 个单独的输入：

[text* dob-month minlength:2 maxlength:2 class:inputs placeholder "MM"] 
[text* dob-day minlength:2 maxlength:2 class:inputs placeholder "DD"]
[text* dob-year minlength:4 maxlength:4 class:inputs placeholder "YYYY"]

现在，当用户在框中输入信息时，我只是尝试自动切换到下一个字段。因此，当他们输入 2 位月份时，光标会跳转到日期输入字段，他们输入 2 位日期时会自动跳转到年份。我试过这个没有运气：

<script>
$(".dob-month").on("keyup", function () 
$(this).next('.dob-day').focus(); );
$(".dob-day").on("keyup", function () 
$(this).next('.dob-year').focus(); );
</script>

我试过这个没有运气：

$".inputs").keyup(function()
$(this).next(".inputs").focus(); );

我试过这个没有运气：

$(".inputs").keyup(function (field, autoMove) 
    if (field.value.length >= field,maxLength)
        document.getElementByClass(autoMove).focus();
     );

我只想让它自动跳转到下一个字段，但我找不到解决方案。任何帮助将不胜感激，也许我只是语法错误，但无论哪种方式，我都无法让其中任何一个工作。

这是该部分列的 html：

<div class="grve-container">
 <div class="grve-row grve-bookmark grve-columns-gap-30">
  <div class="grve-column wpb_column grve-column-1-2">
   <div class="grve-column-wrapper">
    <div class="grve-element grve-text">
     <label>Date of Birth</label>
      <div class="grve-row grve-bookmark grve-columns-gap-0">
       <div class="grve-column-1-3">
        <div class="grve-column-wrapper">
         <div class="grve-element grve-text">
[text* dob-month minlength:2 maxlength:2 class:inputs placeholder "MM"]
         </div>
        </div>
       </div>
       <div class="grve-column-1-3">
        <div class="grve-column-wrapper">
         <div class="grve-element grve-text">
[text* dob-day minlength:2 maxlength:2 class:inputs placeholder "DD"]
         </div>
        </div>
       </div>
       <div class="grve-column-1-3">
        <div class="grve-column-wrapper">
         <div class="grve-element grve-text">
[text* dob-year minlength:4 maxlength:4 class:inputs placeholder "YYYY"]
         </div>
        </div>
       </div>
      </div>
    </div>
   </div>
  </div>
</div>

更新：所以我一直在玩代码，这几乎可以工作。当我在一个字段中输入文本时，它会在控制台记录“hello”，所以这段代码的最后一行有问题：

jQuery('.inputs').keyup(function () 
    if (this.value.length >= this.maxLength)
        console.log("hello");
        jQuery(this).next('.inputs').focus();
     );

我也开始意识到 CF7 无法识别 $，你必须实际使用 jQuery 让它识别输入，但是当我在这 3 个字段中输入文本时，这个函数会记录“你好”

【问题讨论】：

我们需要查看表单标记的 html 才能帮助使用 jQuery 选择器

为什么不使用 jQuery UI 日期选择器并将日期格式设置为您想要的任何格式？

@HowardE 在 Contact Form 7 的范围内工作可能比将 jQuery UI 集成到 WordPress 中更容易。

@HowardE 我使用 WordPress 和 Contact Form 7 构建了它。虽然 jQuery UI Datepicker 是一个不错的选择，但不幸的是它不适用于 Contact Form 7，我正在寻找使用 CF7 的解决方案。

@admcfajn 如果我需要调用添加了 CF7 输入字段的容器，我可以将任何类或 ID 添加到任何部分。此外，我只将第一列的代码放在该行中，然后将其拆分为 1/2 主列内的 3 列，以使 3 个输入字段彼此相邻。

【参考方案1】：

首先，在你的主题或子主题的functions.php中，你必须将jQuery UI加入队列。

如果您愿意，您甚至可以将其限制在您的表单所在的页面上。

如果你真的想变得花哨，你可以将文本字段设置为只读，这会迫使人们使用 datepicker-ui。但是，这需要额外的编码。

add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() 
    // Check if is page where contact form is, or leave out to enqueue everywhere
    //if (is_page(123))  
        // Wordpress already has this...
        wp_enqueue_script( 'jquery-ui-datepicker' );
        // Serve locally if you want by downloading.
        wp_enqueue_style( 'ui-datepicker-style', 'https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css' );
        // You can pick whatever theme you want here
        wp_enqueue_style( 'ui-datepicker-theme', 'https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/redmond/theme.min.css' );
    //

然后在您的联系表单中执行以下操作：

[text* your-field class:use-datepicker]
[submit]
<script>
    jQuery(function($)
        $(".use-datepicker").datepicker(
            dateFormat: "yy-mm-dd"
            // Set Whatever Options you want here 
            // See https://api.jqueryui.com/datepicker/
        ); 
    );
</script>

【参考方案2】：

好的，当达到输入的最大长度时，我得到了联系表格 7 的工作代码行，以跳转到下一个字段。我在 3 个字段中添加了 ID，然后创建了一个有效的函数。这是最终的工作代码：

jQuery('#inputs1').keyup(function () 
    if(this.value.length >= this.maxLength)
        jQuery('#inputs2').focus();
     );
jQuery('#inputs2').keyup(function () 
    if(this.value.length >= this.maxLength)
        jQuery('#inputs3').focus();
     );

但这不适用于移动设备。有人有针对移动设备的解决方案吗？