填写输入字段时重新启用禁用的命令按钮

Question

我需要启用/禁用JSF 2.0页面上的按钮,具体取决于用户是否在文本区域中输入了文本.

但是,在启用/禁用按钮的同时,不会调用该操作.

这是代码:

<script>
                                function countChar() {
                                    var val = findElement('inputNoteTextArea');
                                    var len = val.value.length;
                                    var maxLen = 400;
                                    var charLeft;
                                    $('#charNum').text(
                                            'Note:' + maxLen + ' characters left  out of ' + maxLen);
                                    if (len >= maxLen) {
                                        val.value = val.value.substring(0, maxLen);
                                        $('#charNum').text(' you have reached the limit');
                                        document.getElementById('noteSubmitButton').disabled = false;
                                    } else if (len > 0 ){
                                        charLeft = maxLen - len;
                                        $('#charNum').text(
                                                'Note :' + charLeft
                                                        + ' characters left  out of ' + maxLen);
                                        document.getElementById('noteSubmitButton').disabled = false;
                                    } else {
                                        charLeft = maxLen - len;
                                        $('#charNum').text(
                                                'Note :' + charLeft
                                                        + ' characters left  out of ' + maxLen);
                                        document.getElementById('noteSubmitButton').disabled = true;
                                    }
                                }                               
                            </script>
                            <h:inputTextarea
                                value="#{requestScopeBean.notes}" rows="6"
                                cols="90" onkeyup="countChar();" 
                                id="inputNoteTextArea" binding="#{requestScopeBean.inputNoteText}">                                         </h:inputTextarea>
                            <div id="charNum" class="fontNormal11">
                                <span class="fontB11">Note:</span> 400 characters
                                left out of 400
                            </div>
                            <a4j:commandButton styleClass="cmdButton marR5 floatL"
                                value="Save Note" id="noteSubmitButton"
                                render="NotesForm"
                                action="#{requestScopeBean.saveNotes}"
                                title="Submit" disabled="#{requestScopeBean.enableDisableButton}"
                                oncomplete="countChar();"/>
                            <script>
                            document.getElementById('noteSubmitButton').disabled = true;
                            </script>

Answer 1

通过JavaScript重新启用服务器端禁用按钮确实无法正常工作.处理表单提交时,JSF将disabled在创建和排队操作事件之前再次检查属性.这是作为防止篡改/被黑客入侵请求的一部分来完成的(想象一下当用户不是网站管理员时禁用的命令按钮,这样的按钮绝对不应该仅由最终用户完全控制的JavaScript代码启用).

在您的情况下,disabled="#{bean.disabled}"仍在此时评估true,在处理表单提交期间仍然有效地禁用按钮,因此动作事件将不会排队,并且不会调用操作方法.这也被称为commandButton/commandLink/ajax动作/监听器方法的第5点未调用或输入值未更新.

你该怎么办？只需通过JSF而不是JavaScript启用按钮.让disabled属性改为检查输入值是否为空.

<h:inputTextarea value="#{bean.input}" ...>
    <f:ajax event="keyup" delay="200" render="buttonId" />
</h:inputTextarea>
<h:commandButton id="buttonId" ... disabled="#{empty bean.input}" />

这delay="200"只是为了避免服务器受到大量的ajax请求的攻击,每个类型的字符都有一个.

或者,最初通过JavaScript而不是JSF禁用该按钮.您已经为合适的剧本到位,但它缺少形式ID,导致它可能不工作(使用<h:form prependId="false">是这样的做法不好的,你不应该这样做).

<h:form id="formId">
    ...
    <h:commandButton id="buttonId" ... /> <!-- Note: no JSF disabled attribute! -->
</h:form>

<script>
    document.getElementById("formId:buttonId").disabled = true;
</script>

不要忘记disabled从按钮中删除JSF 属性,原因如上所述.