Search code examples
javascripthtmlcontenteditable

How to have an HTML input that spans multiple lines?


I'm trying to create a user experience that looks like this:

enter image description here

Basically, there is a <span> of non-editable text followed by a textarea/input and some other non-editable <span>s. A simple textarea/input poses no problem when the length of the gap is short, but when it's long, the layout gets pretty awkward. I've looked into contentEditable, but I'm not sure if it's what I need (I've also read several posts suggesting it's evil).

Do I have any other options?


Solution

  • Perhaps the contentEditable property can help you. Have a look here https://www.w3schools.com/JSREF/prop_html_contenteditable.asp

    There is a tipical example https://www.w3schools.com/JSREF/tryit.asp?filename=try_dom_body_contenteditable

    You may switch on an editable mode for a span or inline div, for instance.