頁面加載時如何激活 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">