Событие onkeydown, запускающее нажатие на командную кнопку

Question

В одной форме есть несколько элементов управления входным текстом и командных кнопок. Нажатие клавиши возврата на один входной текст необходимо активировать щелчок связанного командного элемента. Как я могу достичь этой функциональности? Я попытался использовать 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 compoents

<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>