codemirror can't type to the editor

问题

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) create and append textarea element:

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

b) initialise codemirror plugin:

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

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.

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?

回答1:

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.

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.

来源：https://stackoverflow.com/questions/45169521/codemirror-cant-type-to-the-editor