选择下拉列表后，WooCommerce Checkout Country 字段自动聚焦其搜索输入

Question

我刚开始使用 PHP，我想自定义与“国家/地区”下拉列表相关的 Woocommerce 结帐字段。我不知道必须在哪里访问该字段的代码以及如何为其设置侦听器。

问题是一旦我打开国家/地区下拉字段，我必须手动单击其搜索输入才能搜索国家/地区。我需要使此搜索输入具有焦点，因此一旦用户打开下拉列表 he/she 就可以通过键入进行搜索而无需单击输入。

我知道这一定不够详细，因为这里没有代码片段。但在这里感谢任何帮助。谢谢

Answer 1

这是 select2 的问题 - https://github.com/select2/select2/issues/5993

问题有解决办法。这是解决方案之一，因为我们在默认结帐表单上有多个 select。创建 js 文件，在其中添加您的 js 代码。例如，我的文件将位于 mythemefolder / assets / js / select2fix.js

在你的 functions.php 文件中添加这个

function theme_checkout_select2fix() {
    // I need this only on checkout page. Change this if you need to load it to different pages.
    if(is_checkout()):
        wp_enqueue_script( 'select2fix', get_template_directory_uri() . '/assets/js/select2fix.js', array('jquery'));
    endif;
}
add_action( 'wp_enqueue_scripts', 'theme_checkout_select2fix' );

将其放入您的 select2fix.js 文件

jQuery(function($) {
    $(document).on('select2:open', () => {
        let allFound = document.querySelectorAll('.select2-container--open .select2-search__field');
        allFound[allFound.length - 1].focus();
    });
});

选择下拉列表后，WooCommerce Checkout Country 字段自动聚焦其搜索输入

WooCommerce Checkout Country field to Autofocus its search input once dropdown is selected

php

input

woocommerce

hook-woocommerce

autofocus