Настройка кнопки ОК (отправить) в JSF 2.0 - PullRequest
Новая
       4

Настройка кнопки ОК (отправить) в JSF 2.0

3 голосов
/ 28 ноября 2011

У меня есть форма и две кнопки управления.Я хочу, чтобы при нажатии клавиши ввода нажималась вторая кнопка команды, но нажата первая кнопка команды.

Пожалуйста, рассмотрите следующий пример кода. 

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

Ответы [ 2 ]

8 голосов
/ 28 ноября 2011

Я предполагаю, что вы хотите применить это ко второму полю ввода, в этом случае вам нужно захватить событие нажатия клавиши и вызвать кнопку с помощью 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, также обратите внимание на 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>
0 голосов
/ 28 ноября 2011

Это так в html. Кнопка отправки, которая стоит первой в разметке, - это кнопка, активированная нажатием Enter. Попробуйте установить 

type="button"

на первой командной кнопке, если это не сработает, у вас не будет большого выбора, кроме как, возможно, переупорядочить свои кнопки и стилизовать их так, чтобы одна находилась перед другой, или, как BalusC сказал, что он нажимает клавиши js.

...