html - 具有 html5 必需属性的 tinyMCE textarea 表单无法提交

Question

这不是问题，而是我想与您分享的答案。我刚刚花了四个多小时搞砸了一些事情，结果证明是 TinyMCE 或 Firefox 中的错误。

加载 TinyMCE 后，如果您在 textarea 上指定 HTML5 required 属性，表单将不会在 Firefox 中提交。没有错误，Firebug 中没有任何内容，只是顽固地拒绝提交。

我不知道这是 FF 错误还是 TinyMCE 错误，也不关心。我只是不想让其他编码员经历我最近几个小时经历的痛苦。

要问一个问题:这个错误是否记录在任何地方？有人知道吗？

如果这是一篇不适合 Stack Overflow 的帖子，请告诉我，我会删除它。

Answer 1

这个问题远不是 Firefox 的问题。事实上，Chrome 和 Opera(“大脑”被移植到 Chrome 之前的“旧”歌剧)以及可能所有其他现代浏览器都会让您同样头疼。

对于 Opera 和 Chrome，有一个标志坚持该字段是必填字段(尽管您在其中有内容)。 Chrome 非常好，可以在控制台中向您显示此错误消息:

An invalid form control with name='<name of textarea>' is not focusable.

当您认为 TinyMCE 实际上创建了一个可编辑的 div 容器并隐藏了您的原始 textarea 时，这并不奇怪。浏览器希望您为其提供值的正是这个隐藏的 textarea(带有 required 属性)。

在 Github 上，这里:https://github.com/tinymce/tinymce/issues/2584 ，有一个建议的解决方案是这样的:

// fix tinymce bug
        if($this.is('[required]')){
            options.oninit = function(editor){
                $this.closest('form').bind('submit, invalid', function(){
                    editor.save();
                });
            }
        }

我没有亲自测试过这个片段，但只要你能把它放在正确的地方，研究它可能会让你继续前进。