CODEWITHSUNDEEP
phpwordpressmaskedinput
Vladimir Polozov
Vladimir Polozov

Reputation: 23

Set maskedinput for wordpress

Hello, I make site on the WordPress and I need to set phone mask on checkout page. I got file jquery.maskedinput.min.js from GitHub and uploaded it on the hosting on the way:

wp-content/themes/woodmart-child/js/

Then I added script in the function.php of Child Theme:

add_action('wp_enqueue_scripts', 'my_maskedinput', 10);
function my_maskedinput() {
    if (is_checkout()) {
        wp_enqueue_script('maskedinput', '/wp-content/themes/woodmart-child/js/jquery.maskedinput.min.js', array('jquery'));
        add_action( 'wp_footer', 'masked_script', 999);
    }
}
 function masked_script() {
    if ( wp_script_is( 'jquery', 'done' ) ) {
?>
    <script type="text/javascript">
        jQuery( function( $ ) {
            $("#billing_phone").mask("+7(999)999-99-99");
        });
    </script>
<?php
    }
}

But the phone mask doesn't show on the checkout page. I check in the DevTools, the code

<script type="text/javascript">
    jQuery( function( $ ) {
        $("#billing_phone").mask("+7(999)999-99-99");
    });
</script>

is added in the html file. But where is mistake? What do I do wrong?

upd: I so tried make it through str_replace (and it doesn't work too):

add_filter( 'woocommerce_form_field', 'my_maskedinput', 20, 4 );
function my_maskedinput( $field, $key, $args, $value ) {
    // Only on checkout page
    if( is_checkout() && ! is_wc_endpoint_url() ) {
        $phone = '&nbsp;<input type="tel" class="input-text " name="billing_phone" id="billing_phone" placeholder="Номер телефона" value autocomplete="tel">';
        $field = str_replace( $phone, '&nbsp;<input type="tel" class="input-text" name="billing_phone" id="billing_phone" placeholder="Номер телефона" value autocomplete="tel" mask="+7 (999) 999-99-99">', $field );
    }
    
    return $field;
}

Upvotes: 0

Views: 286

Answers (1)

Vladimir Polozov
Vladimir Polozov

Reputation: 23

I check file jquery.maskedinput.min.js and it doesn't contain right script. I got file from here and uploded it on the hostin. Then it work!

Upvotes: 0

Related Questions