Javascript/Trinidad：复选框上的自动提交可防止听到 keyup 事件

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 从每个输入中提交表单，您只需在 tr:form 上使用 defaultCommand 属性即可。

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

命令按钮的 id 属性，默认情况下，在表单的任何输入字段上按 Enter 键时将调用其操作以提交表单。

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

---

由于这对您的方案没有帮助，您可以尝试在复选框中添加 onkeypress 属性：

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

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