JSF2 Primefaces Введите код ключа =13 не работает с commandButton

Реальный вопрос: я пытаюсь понять взаимодействие между найденным фрагментом JavaScript и кнопкой Primefaces commandButton. Фрагмент javascript назначается атрибуту onkeypress тега JSF h:form. Этот фрагмент работает на некоторых моих страницах, но не на других. Когда я попытался избавиться от несущественных вопросов, чтобы задать этот вопрос, JavaScript полностью перестал работать.

Кажется, что-то я не понимаю, так как этот код не работает. Обратите внимание, что код работает, если пользователь действительно нажимает кнопку. Я хочу, чтобы он работал, когда они нажимают клавишу Enter. Я отбросил столько, сколько смогу, и стал руководствоваться стилем, чтобы сделать его короче.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui">
    <h:head>
        <title>Tray Report</title>
        <h:outputStylesheet library="css" name="postalreports.css"  />
    </h:head>
    <h:body>
        <h:form id="thisform"  onkeypress="if (event.keyCode == 13) { document.getElementById('thisform:btn').click(); return false; }" > 
            <p:panel id="panel" header="Report For Days">  
                <p:messages id="messages" />  
                <p:inputText id ="days" value="#{trayBean.days}" >
                </p:inputText>
            </p:panel>
            <p:commandButton id="btn" value="RUN" actionListener="#{trayBean.run}"/>            
        </h:form>
    </h:body>
</html>

import java.io.Serializable;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;

@ManagedBean
@ViewScoped
public class TrayBean implements Serializable {
    private Integer days = 1;
    public TrayBean() {}
    public void run() {
        System.out.println("do something here");
    }
    public Integer getDays() {  return days; }
    public void setDays(Integer days) { this.days = days; }
}

PS Я также попробовал if (event.keyCode == 13) { this.submit(); }

ДОБАВЛЕНО ПОСЛЕ ДОПОЛНИТЕЛЬНОГО ИССЛЕДОВАНИЯ: К моему большому огорчению, я нашел конкретное решение Primefaces, которое я должен был найти ранее. Оказывается, что JavaScript вообще не нужен с простым добавлением тега p:focus. Вот файл XHTML, который действительно работает. Нет никаких изменений в бобе поддержки.

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui">

    <h:head>
        <title>Tray Report</title>
    </h:head>
    <h:body>
        <h:form id="thisform"> 
            <p:focus/>
            <p:panel id="panel" header="Report For Days">  
                <p:messages id="messages" />  
                <p:inputText id ="days" value="#{trayBean.days}" >
                </p:inputText>
            </p:panel>
            <p:commandButton id="btn" value="RUN" actionListener="#{trayBean.run}"/>            
        </h:form>
    </h:body>
</html>

Это позволит мне завершить анализ моей первоначальной проблемы (поскольку у меня есть тег a p:focus на страницах, которые еще не работают), которые я опубликую отдельно.

Источник

1 ответ

Решение

Поскольку PrimeFaces основан на jQuery, вам следует сэкономить время и использовать jQuery для регистрации обработчика ключей формы. Конечно, вы должны разрешить ввод для элементов, которые поддерживают его и не вызывают (и не должны запускать) форму отправки. Если вы запретите ввод ENTER в текстовых областях, вы будете сильно раздражать своих пользователей.

Исходя из моего опыта, нажатия клавиш недостаточно, вам также нужно обрабатывать нажатия клавиш:

<script type="text/javascript">
$(document).ready(function () {
var handler = function(event){
        if (event.which == 13) {
            var el = event.target;
            if (/textarea/i.test(el.tagName) || /button/i.test(el.tagName))
                return true;
            if (/input/i.test(el.tagName) && /file/i.test(el.type))
                return true;
            if (_handler)
                setTimeout(_handler, 1);
            event.stopPropagation();
            return false;
        }
        return true;
};
$('form').keyup(handler).keypress(handler)
});
</script>

См. Также эту тему: Как предотвратить нажатие клавиши ВВОД при отправке веб-формы? для большего количества не связанных с этим вопросов.

Источник
Другие вопросы по тегам