使用带有联系表 7 的 cleave.js 格式化多个电话号码

问题描述

我已按照本文所述的步骤下载并安装 cleave.js 并将其加入到我的 functions.PHP 中，并对我的应用程序进行了一些编辑：How to set the contact form 7 phone number format in ###-####-###

它正在处理联系表格 7 的第一个电话字段，我在其中添加了短代码：

[tel* home-phone id:phone minlength:10 maxlength:10 placeholder "(XXX)XXX-XXXX"]

但是，将“id:phone”添加到联系表 7 中的后续电话字段无法使这些字段也使用 cleave.js 格式。

这是我在functions.PHP中使用的代码，编辑为在多个页面上处于活动状态，因为我在多个页面上有多个表单，我需要它来工作，并为电话号码添加一些额外的格式以显示为（ 314）123-4567：

//Enqueue Cleave.js


function enqueue_cleave(){

     wp_enqueue_script('cleave',get_stylesheet_directory_uri().'/js/cleave.min.js');

}

add_action('wp_enqueue_scripts','enqueue_cleave'); 


add_action('wp_footer','activate_cleave');


function activate_cleave(){

   if( is_page( array('826','1129','1207','1146','1154','1174','1136','1162','1182','1193','6507','732','7070')) ){ //only registration pages will load the script.
?>


     <script type="text/javascript">

        document.addEventListener('DOMContentLoaded',() => {

        var phone = new Cleave('#phone',{

            numericOnly:true,delimiters:['(',')','-'],blocks:[0,3,4]

        });

    });


     </script>


<?PHP 
   }
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

cleave contact-form-7 phone-number validation