在JSF 2.0中设置OK(提交)按钮

Question

我有一个表单和两个命令按钮.我希望按下回车键,按下第二个commandButton,但是第一个commandButton被按下.

请考虑以下示例代码.

<h:form>
    <p:inputtext value="#{bean.mobileNumber}" />
    <p:commandButton id="startNewChat" value="Chat" action="#{bean.startNewChat}" update="chatWindow" />
    <br />
    <br />

    <p:outputPanel id="chatWindow">
        <p:inputTextarea readonly="true" value="#{bean.chatMessages}" />
        <p:inputText value="#{bean.newChatMessageFromWeb}" />
        <p:commandButton id="submitChatMessage" action="#{bean.submitChatMessage}" value="Send Message" />
    </p:outputPanel>

</h:form>

当按下Enter键时,按下第一个commandButton(带有id ="startNewChat"),但是我想要按下第二个commandButton(id ="submitChatMessage").

我尝试过: accesskey ="13",type ="submit",id ="submit"

Answer 1

我假设你想在第二个输入字段上应用它,在这种情况下你需要捕获keypress事件并在密钥代码时通过JS调用按钮13.

<form id="form">
    ...
    <p:inputText value="#{bean.newChatMessageFromWeb}" onkeypress="if (event.keyCode == 13) { document.getElementById('form:submitChatMessage').click(); return false; }" />
    <p:commandButton id="submitChatMessage" action="#{bean.submitChatMessage}" value="Send Message" />

(注意我添加了一个id,<h:form>以便命令按钮获得一个可由JS选择的固定ID,同时注意return false,这将阻止默认按钮被触发)

更简洁的方法是将每个表单放在自己的表单中<h:form>.

<h:form>
    <p:inputtext value="#{bean.mobileNumber}" />
    <p:commandButton id="startNewChat" value="Chat" action="#{bean.startNewChat}" update=":chatWindow" />
</h:form>

<p:outputPanel id="chatWindow">
    <h:form>
        <p:inputTextarea readonly="true" value="#{bean.chatMessages}" />
        <p:inputText value="#{bean.newChatMessageFromWeb}" />
        <p:commandButton id="submitChatMessage" action="#{bean.submitChatMessage}" value="Send Message" />
    </h:form>
</p:outputPanel>