第一个组件集中在 <p:dialog>答案

【问题标题】：first component focused in <p:dialog>第一个组件集中在 <p:dialog>
【发布时间】：2014-06-19 12:23:35
【问题描述】：

我有一个 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>

对话框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>

问题：

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

但我想撤消焦点，像这样：（你可以在鼠标离开组件时点击它）

我认为问题出在<p:dialog> 而不是第一个组件；在我的例子中是<p:calendar>，我已经厌倦了将 inputText 作为第一个元素，它的重点是这样的：

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

结果（鼠标在字符串“ali sghaier”的第一个位置）：

我更喜欢自动选择的位置在字符串的末尾

我正在使用：

JSF 2.2.5

PrimeFaces 5

【问题讨论】：

标签： javascript jquery jsf jsf-2 primefaces

【解决方案1】：

其实这是一个jQuery-UI Dialog中的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

【讨论】：