JSF 2.0中的设置OK（提交）按钮

Question

我有一个表单和两个命令按钮。我希望在按下Enter键时，按下第二个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事件并在键代码为13时由JS调用按钮。

<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>，以便命令按钮获得固定的ID，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>

Answer 2

就像html中的那样。标记中最先出现的提交按钮是用enter激活的按钮。尝试设置

type="button" 

在第一个命令按钮上，如果那不起作用，除了重新排列按钮的样式并对其样式进行设置以使一个按钮出现在另一个按钮之前，或者如BalusC所说的用js捕获按键，您别无选择。

Answer 3

如果您的inputText和提交的buttons在同一表格内，请将其放在表格内

<p:defaultCommand target="yourButtonId" />

Enter键将触发带有目标标识的按钮。

如果出现操作员的问题，只需将该行放在表单的末尾，并以所需按钮的ID作为目标即可解决问题。

<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>
    <p:defaultCommand target="submitChatMessage" />
</h:form>