页面加载时如何激活 Reg-Ex？

Question

Woocommerce 结帐页面，我在手机短信中使用正则表达式。 它工作顺利。 但这在页面加载时不起作用。 所以，如果输入电话号码，显示如下： 0000000000 如果我点击 label 它变成我想要的： 000-000-0000 所以如果 label 没有点击，它看起来是相邻的。 我怎么解决这个问题。 我的代码如下：

add_action('wp_footer', 'a_format_checkout_billing_phone');
function a_format_checkout_billing_phone() {
    if ( is_checkout() && ! is_wc_endpoint_url() ) :
        ?>
        <script type="text/javascript">
            jQuery( function($){
                $('#billing_phone').on( 'input focusout', function() {
                    var p = $(this).val();

                    p = p.replace(/[^0-9]/g, '');
                    p = p.replace(/(\d{1})(\d{3})(\d{3})(\d4})/, "$1-$2-$3");
                    $(this).val(p);
                });
            });
        </script>
    <?php
    endif;
}

更新代码 2021 年 5 月 3 日此代码现在可以正常工作。

    add_action('wp_footer', 'a_format_checkout_billing_phone');
        function a_format_checkout_billing_phone() {
            if ( is_checkout() && ! is_wc_endpoint_url() ) :
                ?>
                <script type="text/javascript">
                    jQuery( function($){
                        $('#billing_phone').on( 'input focusout', function() {
                            var p = $(this).val();
        
$('#billing_phone').on('keyup keypress blur change', function(e) {
                    p = p.replace(/[^0-9]/g, '');
                    p = p.replace(/(\d{1})(\d{3})(\d{3})(\d4})/, "$1-$2-$3");
                    $(this).val(p);
                });
                        });
                    });
                </script>
            <?php
            endif;
        }

Answer 1

用这个$("#billing_phone").trigger("input");

add_action('wp_footer', 'a_format_checkout_billing_phone');
function a_format_checkout_billing_phone() {
    if ( is_checkout() && ! is_wc_endpoint_url() ) :
        ?>
        <script type="text/javascript">
            jQuery( function($){
                $('#billing_phone').on( 'input focusout', function() {
                    var p = $(this).val();
                    p = p.replace(/[^0-9]/g, '');
                    p = p.replace(/(\d{3})(\d{3})(\d{4})/, "$1-$2-$3");
                    $(this).val(p);
                });
                $("#billing_phone").trigger("input");
            });
        </script>
    <?php
    endif;
}

 $('#billing_phone').on( 'input focusout', function() { var p = $(this).val(); p = p.replace(/[^0-9]/g, ''); p = p.replace(/(\d{3})(\d{3})(\d{4})/, "$1-$2-$3"); $(this).val(p); }); $("#billing_phone").trigger("input");

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="tel" class="input-text " name="billing_phone" id="billing_phone" placeholder="" value="123456789101112" autocomplete="tel">