使<li>标签可编辑

Question

I need something like html <ul> list.

It should contains bullets and something like textarea.

 textarea{ border : none; } .custom-txt-area{border-bottom : 1px dashed red;} 

 <ul> <li> <textarea class="custom-txt-area" rows="1"></textarea> </li> <li> <textarea class="custom-txt-area" rows="1"></textarea> </li> </ul> 

This is very sample example. Problem here - I can't make textarea extend it height to the bottom if it contans more than 1 row.

Answer 1

Maybe you are looking for contentEditable :

jsFiddle

 <ul> <li contenteditable="true">Edit ME!</li> <li contenteditable="true">Edit ME!</li> <li contenteditable="true">Edit ME!</li> <li contenteditable="true">Edit ME!</li> <li contenteditable="true">Edit ME!</li> <li contenteditable="true">Edit ME!</li> </ul>