当在弹出窗口上按 enter 时，登陆页面上的提交按钮被触发

Question

我有一个带有两个提交按钮的页面，它还会打开一个弹出窗口 (id : addPopup)，其中包含另一个提交按钮。每当在弹出窗口上按下 Enter 时，都会触发登录页面上的第一个提交按钮，但是我想改为调用弹出窗口上的按钮。这是弹出窗口中提交按钮的代码：

<a4j:commandButton id="continueButton" styleClass="btn btn-primary"  
                    value="Continue" 
                    action="#{optionsController.continue()}"
                    render="menuPanel addSection addOptionsPanel"
                    oncomplete="if(#{empty facesContext.messageList})#{rich:component('addPopup')}.hide();"
                    disabled="#{empty optionsController.addParcelId and  empty optionsController.addGridReference}"  />

我试过使用 richfaces 热键，但它不起作用并且页面被提交

<rich:hotKey selector="#addPopup" enabledInInput="true" key="return" preventDefault="true"/>

也尝试过使用

<script type="text/javascript">
$(document).bind('keydown', 'Return', function(e){
        key  = e.keyCode;
        if(key == 13){
            var continueBtn = document.getElementById('continueButton'));               
            continueBtn.click();
    }

});

但这也不起作用。关于我做错了什么或任何其他可能有效的方法有什么建议吗？

Answer 1

尝试在自己的 <h:form> 中呈现弹出内容，这样 Enter 将触发您当前所在的表单。

<rich:popupPanel id="loginPopup" show="true">
    <h:form id="login" class="compact-form clearfix">

    </h:form> 
</rich:popupPanel>

在 rich:popupPanel 中，您可以通过属性 domElementAttachment 决定弹出窗口必须附加到哪里。

希望对您有所帮助...

Answer 2

我使用这个脚本设法处理了回车键：

<script type="text/javascript">
$(document).bind('keydown', 'Return', function(e){
        key  = e.keyCode;
        if(key == 13){  // Enter key pressed
            // Get button binding from backing bean.        
            var continueBtn = document.getElementById("#{optionsController.continueButton.clientId}");                 
            if(!continueBtn.disabled){
                continueBtn.click();
            }
            return false;
        }  
});

还在支持 bean 中添加了 continueButton 的绑定，以及 getter 和 setter

当在弹出窗口上按 enter 时，登陆页面上的提交按钮被触发

When pressing enter on popup the submit buttons on landing page gets triggered

html

javascript

richfaces

jsf-2