Question

在单个表单中有几个primefaces inputtext控件和命令按钮。在一个inputtext上按回车键需要激活相关命令按钮的单击。我怎样才能实现这个功能？我甚至尝试使用onkeydown，但是找不到方法。

Answer 1

您可以尝试（您需要自己在javascript中查找输入密钥）

XHTML：

<p:input onkeydown="test()" />
<p:commandButton styleClass="foo" />

的javascript：

function test(){
$('.foo').click();
}

您还可以看到： How-to-programmatically-trigger-onclick-event 和 How-to-refer-to-a-jsf-component-id-in-jquery

Answer 2

在RongNK的指导下，我更改了我的代码，完全符合我的目的。

添加了CDATA以包含JavaScript。使用\\来转义：在JSF组件的id中

  <h:form id="frmEn">
                <script type="text/javascript" language="JavaScript">
                    //<![CDATA[    
                    function forDx(e) {
                        if (e.keyCode === 13) {
                            $('#frmEn\\:btnDx').click();
                            return false;
                        } else {
                            return true;
                        }
                    }
                    function forIx(e) {
                        if (e.keyCode === 13) {
                            $('#frmEn\\:btnIx').click();
                            return false;
                        } else {
                            return true;
                        }
                    }
                    function forMx(e) {
                        if (e.keyCode === 13) {
                            $('#frmEn\\:btnMx').click();
                            return false;
                        } else {
                            return true;
                        }
                    }
                    function forRx(e) {
                        if (e.keyCode === 13) {
                            $('#frmEn\\:btnRx').click();
                            return false;
                        } else {
                            return true;
                        }
                    }
                    // ]]>
                </script> 

                <p:panel header="Encounter" >
                    <h:panelGrid columns="2" >
                        <p:panel header="Encounter Details" >

                            <h:panelGrid columns="4" >


                                <h:outputLabel value="Tests" ></h:outputLabel>
                                <p:autoComplete  id="txtIx"  value="#{encounterController.test }" completeMethod="#{encounterController.completeIx}"  styleClass="defaultTxt" onkeydown="return forIx(event)" >
                                </p:autoComplete>
                                <h:commandButton id="btnIx"  value="Add" action="#{encounterController.addTest()}">
                                    <f:ajax  execute="btnIx txtIx" render="tblIx" />
                                </h:commandButton>
                                <p:dataTable value="#{encounterController.ecIxs }" var="ix" id="tblIx" >
                                    <p:column >
                                        <f:facet name="header" >
                                            <h:outputLabel value="Tests"/>
                                        </f:facet>
                                        <h:outputLabel value="#{ix.concept.name}"></h:outputLabel>
                                    </p:column>
                                </p:dataTable>






                                <h:outputLabel value="Diagnosis" ></h:outputLabel>
                                <p:autoComplete  id="txtDx"  value="#{encounterController.diagnosis }" completeMethod="#{encounterController.completeDx}"  styleClass="defaultTxt" onkeydown="return forDx(event)" />
                                <h:commandButton id="btnDx"  value="Add" action="#{encounterController.addDiagnosis()}" >
                                    <f:ajax  execute="btnDx txtDx" render="tblDx txtDx" />
                                </h:commandButton>
                                <p:dataTable value="#{encounterController.ecDxs }" var="dx" id="tblDx" >
                                    <p:column >
                                        <f:facet name="header" >
                                            <h:outputLabel value="Diagnoses"/>
                                        </f:facet>
                                        <h:outputLabel value="#{dx.concept.name}"></h:outputLabel>
                                    </p:column>
                                </p:dataTable>



                                <h:outputLabel value="Treatment" ></h:outputLabel>
                                <p:autoComplete  id="txtRx"  value="#{encounterController.rx}" completeMethod="#{encounterController.completeRx}"  styleClass="defaultTxt" onkeydown="return forRx(event)">
                                </p:autoComplete>

                                <h:commandButton id="btnRx"  value="Add" action="#{encounterController.addRx()}">
                                    <f:ajax  execute="btnRx txtRx" render="tblRx" />
                                </h:commandButton>
                                <p:dataTable value="#{encounterController.ecRxs }" var="rx" id="tblRx" >
                                    <p:column >
                                        <f:facet name="header" >
                                            <h:outputLabel value="Treatment"/>
                                        </f:facet>
                                        <h:outputLabel value="#{rx.concept.name}"></h:outputLabel>
                                    </p:column>
                                </p:dataTable>


                                <h:outputLabel value="Plan" ></h:outputLabel>
                                <p:autoComplete  id="txtMx"  value="#{encounterController.plan }" completeMethod="#{encounterController.completeMx}"  styleClass="defaultTxt" onkeydown="return forMx(event)">
                                </p:autoComplete>

                                <h:commandButton id="btnMx"  value="Add" action="#{encounterController.addPlanOfAction() }">
                                    <f:ajax  execute="btnMx txtMx" render="tblMx" />
                                </h:commandButton>
                                <p:dataTable value="#{encounterController.ecMxs}" var="mx" id="tblMx" >
                                    <p:column >
                                        <f:facet name="header" >
                                            <h:outputLabel value="Plan"/>
                                        </f:facet>
                                        <h:outputLabel value="#{mx.concept.name}"></h:outputLabel>
                                    </p:column>
                                </p:dataTable>


                                <h:outputLabel value="Details" ></h:outputLabel>
                                <h:inputTextarea value="#{encounterController.current.comments}" styleClass="defaultTxtArea"></h:inputTextarea>
                                <h:outputLabel value="" ></h:outputLabel>
                                <h:outputLabel value="" ></h:outputLabel>

                                <h:outputLabel value="Charges" ></h:outputLabel>
                                <h:inputTextarea value="#{encounterController.current.charge}" styleClass="defaultTxt"></h:inputTextarea>
                                <h:outputLabel value="" ></h:outputLabel>
                                <h:outputLabel value="" ></h:outputLabel>

                                <h:outputLabel value=""></h:outputLabel>
                                <h:commandButton value="Save" action="#{encounterController.saveSelected()}"></h:commandButton>
                                <h:outputLabel value="" ></h:outputLabel>
                                <h:outputLabel value="" ></h:outputLabel>
                            </h:panelGrid>


                        </p:panel>
                        <p:panel header="Patient Details" >
                            <h:panelGrid columns="2" >
                                <h:outputLabel value="Name"></h:outputLabel>
                                <h:outputLabel value="#{encounterController.current.patient.person.name}"></h:outputLabel>

                                <h:outputLabel value="Age"></h:outputLabel>
                                <h:outputLabel value="#{encounterController.current.patient.person.age}"></h:outputLabel>

                                <h:outputLabel value="Date of Birth"></h:outputLabel>
                                <h:outputLabel value="#{encounterController.current.patient.person.dob}">
                                    <f:convertDateTime pattern="dd MMMM yyyy" />
                                </h:outputLabel>

                                <h:outputLabel value="Sex"></h:outputLabel>
                                <h:outputLabel value="#{encounterController.current.patient.person.sex.name}"></h:outputLabel>

                                <h:outputLabel value="Address"></h:outputLabel>
                                <h:outputLabel value="#{encounterController.current.patient.person.address}"></h:outputLabel>

                            </h:panelGrid>
                        </p:panel>
                    </h:panelGrid>

                </p:panel>

            </h:form>

onkeydown事件触发单击命令按钮

2 个答案: