本文提供了一种在 WooCommerce 结账页面自动添加摩洛哥国家代码 (+212) 到电话号码的方法。通过 JavaScript 代码片段，可以自动检测并转换以 "06" 或 "07" 开头的摩洛哥本地号码，并将其格式化为符合国际标准的 "+212xxxxxxxxx" 格式。本文详细介绍了如何在 WordPress 网站的 functions.php 文件中添加代码，或者通过插件的方式将代码添加到页脚。
在 WooCommerce 网站中，有时需要对用户输入的电话号码进行格式化，例如自动添加国家代码。本文将介绍如何通过 JavaScript 在 WooCommerce 结账页面自动添加摩洛哥国家代码 (+212) 到电话号码，并移除前导的 "0"。
方法一：使用 JavaScript 监听输入框事件
这种方法通过 JavaScript 监听电话号码输入框的 keyup 事件，当用户输入完成后，检测号码是否符合摩洛哥本地号码的格式（以 "06" 或 "07" 开头），如果符合，则自动添加 "+212" 并移除前导的 "0"。
示例代码：
document.querySelector('input[name="phone_number"]').addEventListener('keyup', function(e) {
let value = this.value;
if (value.length == 10 && ['06', '07'].includes(value.slice(0, 2))) {
this.value = '+212' + value.slice(1);
}
});HTML 示例：
代码解释：
- document.querySelector('input[name="phone_number"]'): 选择 name 属性为 "phone_number" 的输入框。请确保你的 WooCommerce 结账页面中电话号码输入框的 name 属性为 "phone_number"。
- .addEventListener('keyup', function(e) { ... }): 为输入框添加 keyup 事件监听器，当用户释放键盘按键时触发。
- let value = this.value;: 获取输入框中的值。
- if (value.length == 10 && ['06', '07'].includes(value.slice(0, 2))) { ... }: 判断输入的号码长度是否为 10 位，并且前两位是否为 "06" 或 "07"，以判断是否为摩洛哥本地号码。
- this.value = '+212' + value.slice(1);: 如果是摩洛哥本地号码，则将输入框的值修改为 "+212" 加上去除前导 "0" 的号码。
方法二：创建隐藏输入框
这种方法创建了一个隐藏的输入框，用于存储最终格式化的电话号码。用户实际输入的电话号码会实时更新到这个隐藏的输入框中。
示例代码：
let ph_input = document.querySelector('input[name="phone_number"]');
//ph_input.setAttribute('type', 'hidden');
let clone = ph_input.cloneNode(true);
ph_input.parentElement.appendChild(clone).setAttribute('type', 'hidden');
let name = ph_input.getAttribute('name') + '_fix_code';
ph_input.setAttribute('default_name', ph_input.getAttribute('name'));
ph_input.setAttribute('name', name);
document.querySelector(`input[name="${name}"]`).addEventListener('keyup', function(e) {
let value = this.value;
let name = this.getAttribute('default_name');
let default_input = document.querySelector(`input[name="${name}"]`);
default_input.value = value;
if (value.length == 10 && ['06', '07'].includes(value.slice(0, 2))) {
default_input.value = '+212' + value.slice(1);
}
});
// Button For Test
document.querySelector(`.test`).addEventListener('click', function (e) {
let value = document.querySelector('input[name="phone_number"]').value;
alert(value);
});HTML 示例：
代码解释：
- let ph_input = document.querySelector('input[name="phone_number"]');: 选择 name 属性为 "phone_number" 的输入框。
- let clone = ph_input.cloneNode(true);: 克隆原始输入框。
- ph_input.parentElement.appendChild(clone).setAttribute('type', 'hidden');: 将克隆的输入框作为隐藏输入框添加到原始输入框的父元素中。
- let name = ph_input.getAttribute('name') + '_fix_code';: 为原始输入框生成一个新的 name 属性，用于区分。
- ph_input.setAttribute('default_name', ph_input.getAttribute('name'));: 将原始输入框的 name 属性保存到 default_name 属性中。
- ph_input.setAttribute('name', name);: 将原始输入框的 name 属性设置为新的 name 值。
- document.querySelector(\input[name="${name}"]`).addEventListener('keyup', function(e) { ... }): 为原始输入框添加keyup` 事件监听器。
- let value = this.value;: 获取原始输入框中的值。
- let name = this.getAttribute('default_name');: 获取原始输入框的 default_name 属性值，即原始的 name 属性值。
- let default_input = document.querySelector(\input[name="${name}"]`);`: 选择隐藏的输入框。
- default_input.value = value;: 将原始输入框的值更新到隐藏的输入框中。
- if (value.length == 10 && ['06', '07'].includes(value.slice(0, 2))) { default_input.value = '+212' + value.slice(1); }: 如果是摩洛哥本地号码，则将隐藏输入框的值修改为 "+212" 加上去除前导 "0" 的号码。
将代码添加到 WordPress
你可以将上述 JavaScript 代码添加到你的 WordPress 网站中，有两种方法：
1. 修改 functions.php 文件：
将以下代码添加到你当前主题的 functions.php 文件的末尾：
add_action('wp_footer', 'fix_code_country');
function fix_code_country()
{
?>
注意： 直接修改 functions.php 文件存在风险，建议在修改前备份该文件。
2. 使用插件添加代码：
你可以使用插件，例如 "Insert Headers and Footers" 或 "WPCode" 等，将 JavaScript 代码添加到网站的页脚。这种方法更加安全，也更容易管理。
注意事项
- 确保 WooCommerce 结账页面中电话号码输入框的 name 属性为 "phone_number"。如果不是，请修改代码中的选择器。
- 如果你的主题或插件已经使用了 JavaScript 来处理电话号码输入框，可能会导致冲突。你需要根据实际情况进行调整。
- 该代码仅适用于摩洛哥号码，如果需要支持其他国家，需要修改代码中的判断条件。
- try...catch 块用于防止 JavaScript 错误导致页面崩溃。
总结
通过以上方法，你可以轻松地在 WooCommerce 结账页面自动添加摩洛哥国家代码到电话号码，并提高用户体验。选择适合你的方法，并根据实际情况进行调整。记住，在修改代码前备份你的网站，以防止意外情况发生。
