Question

我有一个JSF页面，当我点击我显示的元素<p:dialog>时。

页码：

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
xmlns:c="http://java.sun.com/jsp/jstl/core">

<h:form id="userCV" styleClass="bodyStyle">
     ....button here to show the dialog
    </h:form>
<p:dialog header="ESPERIENZA PROFESSIONALE" widgetVar="detailEspPro"
    resizable="true"  position="center" 
    showEffect="clip" closable="false">

    <ui:include src="/dialog/detailEspPro.xhtml" />
</p:dialog>
</ui:composition>

Dialog detailEspPro.xhtml ：

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui">

    <h:form id="detailEspProForm">

        <p:blockUI block="detailEspProForm" widgetVar="blockDetailEspProForm" />

        <h:panelGrid  columns="2" styleClass="detailInfoPersoStyle" border="0">

            <p:column>
                <h:outputText value="Da: " />
                <p:calendar  value="#{userPage.candidato.datanascita}" lang="it" navigator="true" mask="true"  pattern="dd/MM/yyyy" placeholder="dd/MM/yyyy"/>
            </p:column>

            <p:column>
                <h:outputText value="A: " />
                <p:calendar  value="#{userPage.candidato.datanascita}" lang="it" navigator="true" mask="true"  pattern="dd/MM/yyyy" placeholder="dd/MM/yyyy"/>
            </p:column>
            <p:column>
            </p:column>
        </h:panelGrid>

        <h:panelGrid columns="2">

            <p:commandButton value="Save" icon="ui-icon-check" onclick="PF('blockDetailEspProForm').show();" oncomplete="PF('blockDetailEspProForm').hide();PF('detailEspPro').hide(); PF('blockForm').hide();" actionListener="#{userPage.saveChange()}" update=":userCV"/>


            <p:commandButton value="Annulla" icon="ui-icon-cancel" label="Annulla"
                onclick="PF('detailEspPro').hide();"
                oncomplete="PF('blockForm').hide();" update=":userCV @form" actionListener="#{userPage.annullaModifica()}"/>
        </h:panelGrid>

    </h:form>


</ui:composition>

问题：

第一次显示对话框时，第一个组件的聚焦方式如下：

enter image description here

但是我想要撤消焦点，如下所示:(当你用鼠标单击组件时可以获得它）

enter image description here

我认为问题出在<p:dialog>不在第一个组件中;在我的情况下是<p:calendar>，我已经厌倦了将inputText作为第一个元素，它的重点如下：

<p:inputText value="ali sghaier" />

结果（鼠标位于字符串的第一个位置＆＃34; ali sghaier＆＃34;）：

enter image description here

我更喜欢在automatique中选择的位置在字符串的末尾

enter image description here

我正在使用：

JSF 2.2.5

PrimeFaces 5

Answer 1

实际上这是jQuery-UI对话框中的bug，已在jQuery UI 1.10.0m中修复。

你有多种方法可以修复它，我个人更喜欢这个，只需在表格的开头加上：

<span class="ui-helper-hidden-accessible">
   <input type="text" aria-hidden="true" />
</span>

或

您可以在document.ready

中执行此操作

$.ui.dialog.prototype._focusTabbable = function(){};

阅读更多

Prevent jQuery UI dialog from setting focus to first textbox

第一个组件集中在<p：dialog> </p：dialog>

1 个答案: