Question

我有一个页面，通过AJAX分页有一个表格列表，所有自定义。分页工作正常，但Enter键清除表单输入的值而不是提交。我的提交按钮会生成一个AJAX帖子，导致该表重新执行并重新呈现。

如何确保所有表单输入都处理Enter按钮并提交AJAX表单？

这是我的提交按钮：

<f:ajax execute="@form" render=":formlistproposta" onevent="showProgress">
  <h:commandLink styleClass="link" value="#{msg.menu_search_top_all}"    
                 actionListener="#{propostaBean.search}" onclick="clearForm();">
  </h:commandLink>
</f:ajax>

如果我在任何表格的输入上按Enter键，我怎么能确保提交我的AJAX for？

Answer 1

首先，您描述的行为是正确的。在一个简单的HTML页面中，当按下表单内的Enter键时，将拾取并单击第一个按钮。在您的情况下，可能是<input type="reset"/>按钮是表单中的第一个按钮。

我已经使用prototype来实现这一目标。

以下是按下Enter键时将处理表单提交的脚本示例：

var FormSubmissionHandler = Class.create({
    initialize: function(formId, submitterId) {
        this.form = $(formId);
        this.submitter = $(submitterId);
        Event.observe(this.form, 'keypress', this.onKeyPress.bindAsEventListener(this));
    },

    onKeyPress: function(event) {
        var code = event.keyCode;
        var element = Event.element(event);
        if(code == Event.KEY_RETURN) {
            var nodeName = element.nodeName;
            var isSelect = nodeName == 'SELECT';
            var isTextArea = nodeName == 'TEXTAREA';

            if(!isSelect && !isTextArea) {
                Event.stop(event);
                this.submitter.click();
            }
        }
    }
});

Answer 2

我通过jQuery解决了它，类似于@ mmanco的解决方案：

$('form input[type=text]').die('keydown').keydown(function(e){
    if(e.keyCode == 13 ) {
        $('form\\:submitButton').click();
        return false;
    }
});

JSF2：提交AJAX表单

2 个答案: