Question

运行一个基本功能，根据输入长度禁用表单提交按钮。

我正在使用它：

    // check if the newpost text area in empty on page load and also input change
$(document).ready(function(){
    disableNewPost();
    $('#newpost').keyup(disableNewPost);
});

// disable new post submit button if the new post ckeditor is empty
function disableNewPost() {
    if ($('#newpost').val().length > 0) {
        $(".addnewpostbtn").prop("disabled", false);
    } else {
        $(".addnewpostbtn").prop("disabled", true);
    }
}

这适用于普通文本区域，请参见此处：http://jsfiddle.net/QA22X/

但是在使用CKEditor时，它不起作用。

我完成了我的研究，但无法找到有效的方法。

我看到了这个并试了一下：

    // check if the newpost text area in empty on page load and also input change
$(document).ready(function(){
    disableNewPost();
    var e = CKEditor.instances['#newpost']
    e.on( 'keyup', function( event ) {
    disableNewPost();
    });
});

// disable new post submit button if the new post ckeditor is empty
function disableNewPost() {
    var value = CKEDITOR.instances['#newpost'].getData();
    if ($(value).length > 0) {
        $(".addnewpostbtn").prop("disabled", false);
    } else {
        $(".addnewpostbtn").prop("disabled", true);
    }
}

但这也行不通。

对此有何帮助？

Answer 1

如上所述，像这样的编辑器倾向于在其中包含空元素，或者在包装元素内返回内容，因此值永远不会为空，即使它看起来像是。如果在这种情况下就是这种情况，那么这将有助于......

// disable new post submit button if the new post ckeditor is empty
function disableNewPost() {
    var value = CKEDITOR.instances['#newpost'].getData();
    if ($(value).text() == "") {
        $(".addnewpostbtn").prop("disabled", false);
    } else {
        $(".addnewpostbtn").prop("disabled", true);
    }
}

Answer 2

弓箭手的回答可能有用，但这是我认为的另一个合理的解决方案

当编辑器准备好并加载内容时，执行editor.resetDirty()（instanceready，setData回调或任何适合你的事情）
创建setInterval()并在其中检查编辑器是否已被editor.checkDirty()
如果不脏，请执行$(".addnewpostbtn").prop("disabled", false);或您需要的任何内容
如果是，请$(".addnewpostbtn").prop("disabled", true);或您需要的任何内容

你可以使用flags和jquery缓存以及诸如此类的东西进行性能调整，但基本思路是使用CKEditor API来检查它是否脏（内容已经改变）。你也可能有其他变量用于脏检查，就像你的其他表单元素一样脏，但你可以弄明白。

检查CKEditor的值，如果没有内容，则禁用提交按钮

2 个答案: