如何在移动用户的 woocommerce 结帐字段上激活数字小键盘?
How to activate numeric keypad on woocommerce checkout fields for mobile users?
是否可以在 woocommerce 结帐中为移动用户激活数字键盘?
我自定义了 woocommerce 默认结帐字段,其中一些字段只是数字(对于 example:Postal 代码、Phone 等)。
我的大多数网站访问者都是移动用户,我想通过为这些输入字段激活数字小键盘来简化他们的结帐会话。
我在网上搜索了一下,发现如果你添加下面的代码,数字键盘会自动调用。
<input inputmode="numeric" pattern="[0-9]*">
Finger-friendly numerical inputs with inputmode
但我不知道如何将此属性添加到结帐字段,例如 billing_phone、billing_postcode 或其他需要数字的自定义字段。
如有任何帮助,我们将不胜感激
谢谢
经过进一步研究,我从 businessbloomer 找到了这个问题的片段:
// Change field type to number woocommerce checkout
function bbloomer_change_checkout_field_input_type() {
echo "<script>document.getElementById('billing_postcode').type = 'number';</script>";
echo "<script>document.getElementById('billing_city').type = 'number';</script>";
}
add_action( 'woocommerce_after_checkout_form', 'bbloomer_change_checkout_field_input_type');
是否可以在 woocommerce 结帐中为移动用户激活数字键盘?
我自定义了 woocommerce 默认结帐字段,其中一些字段只是数字(对于 example:Postal 代码、Phone 等)。
我的大多数网站访问者都是移动用户,我想通过为这些输入字段激活数字小键盘来简化他们的结帐会话。
我在网上搜索了一下,发现如果你添加下面的代码,数字键盘会自动调用。
<input inputmode="numeric" pattern="[0-9]*">
Finger-friendly numerical inputs with inputmode
但我不知道如何将此属性添加到结帐字段,例如 billing_phone、billing_postcode 或其他需要数字的自定义字段。
如有任何帮助,我们将不胜感激 谢谢
经过进一步研究,我从 businessbloomer 找到了这个问题的片段:
// Change field type to number woocommerce checkout
function bbloomer_change_checkout_field_input_type() {
echo "<script>document.getElementById('billing_postcode').type = 'number';</script>";
echo "<script>document.getElementById('billing_city').type = 'number';</script>";
}
add_action( 'woocommerce_after_checkout_form', 'bbloomer_change_checkout_field_input_type');