时间戳

首页 > 解决方案 > 联系表格 7 自动选项卡到下一个字段

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

问题描述

我正在使用联系表 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 个字段中输入文本时，此函数会记录“hello”

标签： javascriptjquerywordpresscontact-form-7

解决方案

首先，在您的主题或子主题的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>

推荐阅读