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事件并在密钥代码为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>，以便命令按钮获得可由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的按钮。

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

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

3 个答案: