codemirror无法键入编辑器 [英] codemirror can't type to the editor

问题描述

问题在于，如果将CSS中的textatea设置为 display：none; ，初始化codemirror插件后，我将无法输入编辑器，这些是我遵循的步骤：

The problem is that after initialising codemirror plugin i cannot type to the editor if textatea in css is set as display:none;, these are the steps i follow:

a）创建并附加textarea元素：

a) create and append textarea element:

var txt = document.createElement('TEXTAREA');
document.body.appendChild(txt);

b）初始化代码镜像插件：

b) initialise codemirror plugin:

var html_edit = CodeMirror.fromTextArea(txt, {
    mode: 'htmlmixed'
});

那时，如果CSS中的textarea没有被修改，我可以输入编辑器，但是我这样做：

At that point if textarea is untouched in css i can type to the editor, however is i do this:

textarea {
    display:none;
}

光标在编辑器中闪烁，但我无法键入该编辑器。

cursor is blinking in editor but i cannot type to the editor.

我在CSS中将textarea设置为 display：none ，因为在下载代码镜像脚本和初始化后的用户可以看到第二个textarea元素看起来不太好。但是，它会产生上述问题，也许有人已经处理过类似的情况，如何解决？

I am setting textarea to display:none in css because before codemirror scripts are downloaded and initialised user can see for second textarea element which doesnt look very good. However it creates above problem, maybe someone has dealt with similiar situation, how to solve it?

推荐答案

CodeMirror将隐藏的文本区域集中到处理用户输入。您的规则将匹配该元素并将其设置为不显示，这意味着它无法被聚焦，因此，您无法聚焦您的CodeMirror实例。

CodeMirror focuses a hidden textarea to handle user input. Your rule will match that element and set it to display none, which means it can not be focused, and thus, you can't focus your CodeMirror instance.

使用更具体的CSS选择器，例如通过将一个类添加到您的textarea中，以便仅隐藏您创建的textarea。

Use a more specific CSS selector, for example by adding a class to your textarea, to so that you only hide the textarea that you created.

这篇关于codemirror无法键入编辑器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！