Does CodeMirror have to use a textarea element?


Hi all. I just stumbled upon CodeMirror and think that it looks really nice!

I’ve looked a little at the docs and examples and am wondering if CodeMirror can use a text input element instead of a textarea input. What I’m trying to do is have a text input with SQL autocompletion to help users write queries. Something very similar to the advanced issue search input in Jira, if you’re familiar with that at all. Is that possible to do?

Thanks in advance for any help you can provide!

Edit: I’m happy to provide more information if needed. Also, I found an open instance of Jira if you’d like more of an idea of what I’m hoping to create. Just click the “Advanced” to see what I’m referring to.


How would using a text input (by which I assume you mean an <input type=text> tag) help with this?


Yup, I was referring to using an <input type="text"> element. It’s more of a UI matter, I guess. I need the input to appear as a single line input.

Your comment helped to kickstart my brain (it’s still early for me) and I realized that I should be able to style the textarea to look like a single line with a little JS to disable newlines. Thanks for that! I should also be able to style the autocomplete suggestions to make them appear as a dropdown to the textarea, right?


The thing you see on your screen is not a textarea, so styling textareas won’t help. What you can do is handle "beforeChange" events to prevent people from inserting newlines.


Ah, ok. I obviously need to play around with CodeMirror a bit. Thanks for pointing me in the right direction!