Question

I’m trying to create an html list where the user can edit the items as they appear on the page and navigate through them using standard keys and idioms from word processing applications. Something a little like http://www.workflowy.com

I’ve implemented this by giving each list item a textarea. Initially the style for the text editor hides it but if the list item class is set to “editor” then the textarea is shown and the list text is not. Example at http://jsfiddle.net/WWkWc/13/

If you go to that example you will notice that when you click on a list item it mostly looks like you expect it to (in this example you can only navigate by clicking on items, not with arrow keys). The only real problem with it is that the text box is taller than the line of text and so when the text box is showing the list item gets taller. I cannot figure out how to get rid of this effect.

Cheers

Answer 1

Any chance you can use contenteditable instead?

http://jsfiddle.net/WWkWc/16/

<li contenteditable>
  <h2>Item text</h2>
</li>

More Examples:

http://html5demos.com/contenteditable

If you don’t want to use content editable then the trick is to get the h2 element and the textarea element to have the exact same properties. In this case I give them the same, font-size, font-family and height. I also set textarea to block because h2 is a block level element. Finally I set overflow: hidden to prevent scroll arrows. I also simplified your javascript a bit.

http://jsfiddle.net/HM5V5/1/

h2, ul li textarea {
    font-size: 16px; 
    font-family: arial; 
    height: 19px;
}

ul li textarea {
    display: none;
    /*border: 1px solid gray;*/
    outline: 1;
    border: 0;
    resize:none;
    overflow: hidden;
}

ul li.editor textarea {
    display: block;
}
ul li.editor h2{
    display:none;
}