时间戳

首页 > 解决方案 > 如何聚焦使用 p:ajax 更新的字段？

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

问题描述

我的 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 和表单方面工作（一切都正确显示），但我得到了这个奇怪的行为，如果我从下拉列表中选择一个值，键盘会显示，但是如果我点击一个数字（例如 PrimeFaces 键盘上的“1”），那么它不会将它添加到输入字段，因为焦点实际上并不存在。

在此处输入图像描述

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

PrimeFaces 版本：6.0。

标签： jsfprimefaces

解决方案

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

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

<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');});" 
 />

推荐阅读