javascript - 如何使文本区域元素看起来像普通文本

Question

我正在尝试创建一个 html 列表，用户可以在其中编辑出现在页面上的元素，并使用文字处理应用程序中的标准键和习语在它们之间导航。有点像 http://www.workflowy.com

我通过给每个列表项一个文本区域来实现它。最初，文本编辑器的样式将其隐藏，但如果列表项类设置为“编辑器”，则会显示文本区域，而不会显示列表文本。示例位于 http://jsfiddle.net/WWkWc/13/

如果您转到该示例，您会注意到当您单击列表项时，它看起来就像您期望的那样(在此示例中，您只能通过单击元素来导航，而不是使用箭头键)。唯一真正的问题是文本框比文本行高，因此当文本框显示时列表项会变高。我不知道如何摆脱这种影响。

干杯

Answer 1

任何机会你都可以使用 contenteditable相反？

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

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

更多示例:

http://html5demos.com/contenteditable

如果您不想使用可编辑的内容，那么技巧就是让 h2 元素和 textarea 元素具有完全相同的属性。在这种情况下，我给它们相同的字体大小、字体系列和高度。我还将 textarea 设置为 block 因为 h2 是 block 级元素。最后我设置溢出:隐藏以防止滚动箭头。我还稍微简化了您的 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;
}