如何在Woocommerce字段中包含遮罩?例如.电话:[phone]

问题描述

根据WC文档，如果我想在结帐区域中添加新字段，则应在 functions.php中编写以下代码:

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>';
}

如果我要编辑标签"或占位符"字段，那么我还应该在 functions.php 中使用此其他代码:

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;
}

考虑到以上代码，我如何在Woocommerce中添加域掩码?

我以前在Jquery(不在Wordpress中)中使用jQuery在html站点中完成了此操作，但是我不知道如何在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，我已经尝试了插件巴西的WooCommerce额外结帐字段"，但无法正常工作.

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

推荐答案

正如我在评论中所说，我将向您的表单字段添加一个自定义类，然后使用maskedinput脚本定位该类.

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.

首先，我们将注册所需的脚本.假设您正在构建自定义插件，并且以下代码段位于基本插件文件中，并且脚本位于名为 js :

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 );
}

然后，我们将像已经完成的那样添加您的字段.但是请注意，通过 woocommerce_form_field()添加的其他CLASS:

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>';
}

现在，在您的JavaScript文件 js/your-script.js 中，您将按照Maskedinput的说明进行操作，并在您先前定义的自定义类上调用 .mask 插件.

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("[phone]");
});

这篇关于如何在Woocommerce字段中包含遮罩?例如.电话:[phone]的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！