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 action/listener method not invoked or input value not updated的第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>

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

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

1 个答案: