如何聚焦使用 p:ajax 更新的字段？

Question

我的 PrimeFaces 应用程序有问题。

想象一个下拉菜单 (p:selectOneMenu) 和一个键盘字段 (p:keyboard)。下拉是这样的：

<p:selectOneMenu
    id="artikelUserAuswahl"
    style="width: 80%;"
    filter="true"
    filterMatchMode="#{userBean.sucheMethodeArtikelKasse}"
    value="#{kassenController.artikelNummerDropdown}"
    disabled="#kassenController.tooMuch}"
    onchange="$(function(){PrimeFaces.focus('formKasse:anzahl');});">
        <f:selectItem
            itemLabel="#{resourceUtils.getI18N('label.artikel.waehlen')}"
            itemValue=""
            itemDisabled="true"
            noSelectionOption="true" />
        <f:selectItems
            value="#{kioskArtikelController.recordListIncludeSelected}"
            var="ki"
            itemLabel="#{ki.text}"
            itemValue="#{ki.artikelNummer}"/>
        <p:ajax
            update=":formKasse :formKasse:artikelNummer :formKasse:anzahl :formKasse:preis
                    formKasse:artikelBeschreibung :formKasse:bestandVorhanden :formKasse:buttonAbschluss"   
            listener="#{kassenController.addArtikelDropdown}" />
        <p:focus for="preis" />
</p:selectOneMenu>

我有 p:keyboard 字段：

<p:keyboard
    id="#{userBean.kioskKasseUseNumpadPreis ? 'anzahl' :'anzahlNotRendered'}"
    value="#{kassenController.anzahlAsString}"
    layout="custom"
    layoutTemplate="123,456,789,0.,back-close"
    backspaceLabel="#{resourceUtils.getI18N('label.keyboard.backspace')}"
    styleClass="kioskNumpadRabatt"
    rendered="#{userBean.kioskKasseUseNumpadMenge}"
    style="width: 80%; border: 2px solid #eeeeee !important;"
    autocomplete="off"
    disabled="#{kassenController.tooMuch}"
    tabindex="2" />

请不要误会我的意思，在值、bean 和表单方面一切正常（一切都正确显示），但我遇到了这种奇怪的行为，如果我 select 一个值从下拉菜单中，键盘显示，但如果我点击一个数字（例如 PrimeFaces 键盘上的“1”），则它不会将其添加到输入字段，因为焦点并不在那里。

但是只要我手动点击 p:keyboard 字段，它就可以正常工作（问题：最终产品将运行在触摸屏显示器上）。

PrimeFaces 版本：6.0.

Answer 1

在这种情况下，焦点在 ajax 更新之前完成。因此 ajax 更新将在您设置焦点后触发。由于在此 ajax 调用中您还更新了刚刚设置焦点的字段，因此它将撤消设置此焦点。

解决方法是在 p:selectOneMenu 的 ajax 调用的 oncomplete 中设置焦点：

<p:ajax
    update=":formKasse :formKasse:artikelNummer :formKasse:anzahl :formKasse:preis
                formKasse:artikelBeschreibung :formKasse:bestandVorhanden :formKasse:buttonAbschluss"   
    listener="#{kassenController.addArtikelDropdown}" 
    oncomplete="$(function(){PrimeFaces.focus('formKasse:anzahl');});" 
 />

如何聚焦使用 p:ajax 更新的字段？

How to focus a field that was updated using p:ajax?

jsf

primefaces