JavaScript/特立尼达 : autoSubmit on checkbox prevents keyup event from being heard

Question

当我的用户在单击复选框后按“Enter”键时，我的表单应该表现得就像按下“下一步”按钮一样。但是，我正在使用 PPR(部分页面渲染)，因此当单击它时，我的复选框会触发“下一步”按钮进行重新绘制。这是通过在复选框上设置 autoSubmit="true"并在按钮上设置partialTrigger 来完成的。

问题是，在我的组件上使用 autoSubmit=”true” 时，javascript/jquery 不会“听到”keyup 事件。我认为这是因为当具有partialTrigger 的按钮时它被重新绘制，我的复选框失去了焦点。我尝试过在 onclick 方法中重置复选框上的焦点，但它似乎触发得太早了。我也设置了超时，但这也不起作用。我还尝试过在复选框的 valueChangeListener 方法期间以编程方式进行 JavaScript 调用，但这也必须太早触发。有谁知道为什么会发生这种情况以及我能做什么？

这是代码

$(document).ready(function(){ 
    $("input[id='subview:agree']").keyup(function (event) {
    if (event.keyCode == 13) {      
        processEnterKey();
    }
  });
 }); 

function processEnterKey() {
    $("button[id='subview:btnSubmit']").click();   
}  

复选框:

<tr:selectBooleanCheckbox binding="#{bean.termsOfUseChkBox}"
                          id="agree"
                          autoSubmit="true"
                          simple="true"
                          valueChangeListener="#{bean.agreementChangeListener}"/>                                         /

按钮:

<tr:commandButton id="btnSubmit"
                  disabled="#{!bean.agreementAccepted}"
                  partialTriggers="agree" text="Next"
                  action="#{bean.termsOfUse_action}"
                  partialSubmit="false"
                  onclick="handleLoadingPleaseWait()"
                  blocking="true"/>

这是我用来尝试将焦点设置回复选框的 onclick 方法，以便它可以“听到”按键:

$("input[id='subview:agree']").click(function (event) {
        if(document.getElementById('subview:agree').checked) {
        setTimeout(function(){document.getElementById('subview:agree').focus();},1000)
        }
 });

这是我放入changeListener中的服务器端代码:

    FacesContext fctx = FacesContext.getCurrentInstance();
    ExtendedRenderKitService erks = null;

    //compose JavaScript to be executed on the client 
    StringBuilder script = new StringBuilder();
    script.append("document.getElementById(\"subview:agree\").focus();");

    erks = Service.getRenderKitService(
                     fctx, ExtendedRenderKitService.class);
    erks.addScript(fctx, script.toString());

Answer 1

如果您想通过按 Enter 键从每个输入提交表单，您可以简单地使用 defaultCommand您的 tr:form 上的属性.

关于 <tr:form defaultCommand="..."/> 的文档

The id attribute of the command button whose action would be invoked by default for form submit on hitting enter on any of the input fields of the form.

因此，将其设置为 btnSubmit应该可以解决问题。

<小时/>

由于这对您的情况没有帮助，您可以尝试添加 onkeypress属性到您的复选框:

<tr:selectBooleanCheckbox binding="#{bean.termsOfUseChkBox}"
                          id="agree"
                          autoSubmit="true"
                          simple="true"
                          valueChangeListener="#{bean.agreementChangeListener}"
                          onkeypress="if (event.keyCode === 13){ this.click(); }"/>

对我来说，这触发了我提交表单。