如何使textarea元素看起来像普通文本

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

我正在尝试创建一个html列表，用户可以在页面上显示项目，并使用文字处理应用程序中的标准键和惯用语来浏览它们。有点像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/

我已经通过为每个列表项提供textarea来实现这一点。最初，文本编辑器的样式隐藏它，但如果列表项类设置为“editor”，则显示textarea而列表文本不显示。 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

干杯

2 个解决方案

#1

Any chance you can use contenteditable instead?

你有可能使用contenteditable吗？

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.

如果您不想使用可编辑的内容，那么诀窍是让h2元素和textarea元素具有完全相同的属性。在这种情况下，我给他们相同的，font-size，font-family和height。我还设置textarea来阻止因为h2是块级元素。最后我设置溢出：隐藏以防止滚动箭头。我也简化了你的javascript。

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;
}

#2

In case you don't want to reinvent the wheel check out http://aloha-editor.org/ or http://jejacks0n.github.com/mercury/ which does just that. Both are HTML5 editors.

如果您不想重新发明*，请查看http://aloha-editor.org/或http://jejacks0n.github.com/mercury/。两者都是HTML5编辑器。

#1