管理新订单:自动聚焦搜索产品

时间:2021-05-19 作者:user1820

我正在后端创建一个新订单,我希望在加载表单时自动聚焦搜索产品。

enter image description here

我尝试添加autofocus “选择”字段,但它不起作用。用于此的合适挂钩/过滤器是什么?任何帮助都将不胜感激。谢谢

1 个回复
SO网友:Rup

This is a Backbone modal, wc-modal-add-products, defined in html-order-items.php and triggered by meta-boxes-order.js.

You say you\'ve marked the field autofocus. This StackOverflow answer proposed adding an onRender handler to the modal that finds autofocus and selects it:

$(this.el).find(\':input[autofocus]\').focus();

I don\'t know where the best place to put this is, but if you find the WCBackboneModal code you\'ll see the render hook ends by triggering a DOM event:

$( document.body ).trigger( \'wc_backbone_modal_loaded\', this._target );

I\'d hook that event and use the code from SO, e.g. with jQuery (untested)

$( document.body ).on( \'wc_backbone_modal_loaded\', function( event, el ) {
    $(el).find(\':input[autofocus]\').focus();
});

or if you\'re happy to edit the original WooCommerce scripts you can just add it to the render method there. (Note that by editing this or the template you\'re risking losing your changes when the plugin updates.)

However as this is a useful UI improvement to a built-in dialog I\'d raise this with WooCoommerce as a feature request.