As I don't know any control that suits your needs, I'll try to suggest some implementation options:
Contenteditable:
Take a look at the contenteditable
attribute - demo here.
This won't match all your requirements (point 12 is the main blocker here), but it's pretty nice OOTB, and (according to MDN) cross-browser.
The demo provided above may be a good starting point for your own solution.
One input per line:
The other approach will be to use one input for each of the lines. I've provided simple demo that adds "new line" as enter is pressed.
Although this implementation will also need a bit of boxing with keyboard events, this one-element-per-line model seems to better reflect your bussiness needs and is pretty flexible. I'd be afraid about performance with bigger data sets, though.
This can be also mixed with contenteditable
approach (e.g. list of editable <li>
elements), but it doesn't seem to bring in any benefits. It even brings some problem, because contenteditable
won't restrict number of lines by default; with regular input
, you have a guarantee that one element contains one line.