How include mask in the Woocommerce fields? E.g. Phone: (99) 9999-9999

问题

According to the WC docs, if I want to add a new field in the checkout area I should write the following code in functions.php:

/* Add the field to the checkout*/
add_action('woocommerce_after_order_notes', 'my_custom_checkout_field');

function my_custom_checkout_field( $checkout ) {
echo '<div id="my_custom_checkout_field" class="my_new_field"><h2>' . __('My Field') . '</h2>';

woocommerce_form_field( 'my_field_name', array(
    'type'          => 'text',
    'class'         => array('my-field-class form-row-wide'),
    'label'         => __('Fill in this field'),
    'placeholder'   => __('Enter something'),
), $checkout->get_value('my_field_name'));

echo '</div>';
}

If I want to edit fields Label or Placeholder, then I should use also this other code in functions.php:

// Hook in
add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );

// Our hooked in function - $fields is passed via the filter!
function custom_override_checkout_fields( $fields ) {
$fields['order']['order_comments']['placeholder'] = 'My new placeholder';
$fields['order']['order_comments']['label'] = 'My new label';

return $fields;
}

Considering above codes, how can I include field masks in the Woocommerce?

I've done this before in my html site with Jquery (out of Wordpress) but I can't figure out how to do it in the Woocommerce.

Fyg, I've already tried the plugin "WooCommerce Extra Checkout Fields for Brazil" and it didn't work properly.

回答1:

Well as I said in my comment, I would add a custom class to your form field and then use the maskedinput script to target that class.

First we'll register the scripts we need. This assumes you are building a custom plugin and that the follow snippet is in the base plugin file, and the scripts are in a folder called js:

add_action( 'wp_enqueue_scripts', 'so_41742982_register_scripts' );
function so_41742982_register_scripts(){
    wp_register_script( 'jquery.maskedinput', plugins_url( 'js/jquery.maskedinput.js', dirname(__FILE__) ), array( 'jquery' ), '1.0', true );
    wp_register_script( 'your-script', plugins_url( 'js/'your-script.js', dirname(__FILE__) ), array( 'jquery', 'jquery.maskedinput' ), '1.0', true );
}

Then we'll add your field as you've already done. But note the additional CLASS being added via woocommerce_form_field():

/* Add the field to the checkout*/
add_action('woocommerce_after_order_notes', 'my_custom_checkout_field');

function my_custom_checkout_field( $checkout ) {

    wp_enqueue_script( 'jquery.maskedinput' );
    wp_enqueue_script( 'your-script' );

    echo '<div id="my_custom_checkout_field" class="my_new_field"><h2>' . __('My Field') . '</h2>';

    woocommerce_form_field( 'my_field_name', array(
        'type'          => 'text',
        'class'         => array('my-custom-mask my-field-class form-row-wide'),
        'label'         => __('Fill in this field'),
        'placeholder'   => __('Enter something'),
    ), $checkout->get_value('my_field_name'));

    echo '</div>';
}

Now in your javascript file js/your-script.js you would follow the Maskedinput directions and call the .mask plugin on the custom class you defined earlier.

jQuery( document ).ready( function($) {
   $(".my-custom-mask").mask("(999) 999-9999");
});

来源：https://stackoverflow.com/questions/41742982/how-include-mask-in-the-woocommerce-fields-e-g-phone-99-9999-9999

标签

jquery

wordpress

input

woocommerce

mask