在 JSF 2.0 中设置 OK（提交）按钮答案

【问题标题】：Setting OK(submit) button in JSF 2.0在 JSF 2.0 中设置 OK（提交）按钮
【发布时间】：2011-11-28 17:45:32
【问题描述】：

我有一个表单和两个命令按钮。我希望在按下回车键时，第二个 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(with id="startNewChat") 被按下，但我希望第二个 commandButton(with id="submitChatMessage") 应该被按下。

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

【问题讨论】：

您想将此应用于所有输入字段还是仅应用于id="chatWindow" 中的一个？
@BalusC，id="chatWindow" 中的字段。这是一个示例代码，在原始代码中，我有更多字段......谢谢

标签： jsf-2 primefaces

【解决方案1】：

我假设您想在第二个输入字段上应用它，在这种情况下，您需要捕获按键事件并在键码为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" />

（请注意，我在<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>

【讨论】：

【解决方案2】：

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

type="button"

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

【讨论】：

【解决方案3】：

如果您的inputText 和提交buttons 在同一个表单中，请将其放在表单中

<p:defaultCommand target="yourButtonId" />

回车键将触发带有目标 id 的按钮。

如果是操作员的问题，只需将该行放在表单末尾，并将所需按钮的 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>

【讨论】：