如何使一个textarea元素看起来像正常文本

我想创建一个HTML列表，用户可以编辑它们出现在页面上的项目，并使用标准键和成语来处理文字处理应用程序。有点像http://www.workflowy.com 如何使一个textarea元素看起来像正常文本

我已经通过给每个列表项一个textarea实现了这一点。最初，文本编辑器的样式隐藏了它，但是如果列表项类被设置为“编辑器”，那么将显示textarea并且列表文本不是。示例在http://jsfiddle.net/WWkWc/13/

如果转到该示例，您会注意到当您单击列表项时，它大多看起来像您期望的那样（在此示例中，您只能通过单击项而不是通过箭头键进行导航）。唯一真正的问题是，文本框比文本行高，所以当文本框显示列表项越来越高。我无法弄清楚如何摆脱这种影响。

干杯

2011-12-20 Alex jg

有没有可能用contenteditable代替？

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

例子：

http://html5demos.com/contenteditable

如果你不想使用内容编辑，则关键是要得到h2元素，并有在textarea元素完全相同的属性。在这种情况下，我给他们相同的字体大小，字体家族和身高。我还将textarea设置为block，因为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; 
}

来源

2011-12-20 20:45:59 mrtsherman

这看起来相当不错，这样我可能会使用它，但我仍想知道如何解决这个问题与textarea的大小，主要是为了知道这个问题该如何解决呢弹出另一种情况。 – 2011-12-20 23:40:19

@Alexjg - 好的，更新我的答案 – mrtsherman 2011-12-21 01:59:24

如果你不想推倒重来退房http://aloha-editor.org/或http://jejacks0n.github.com/mercury/它做到了这一点。两者都是HTML5编辑器。

来源

2011-12-20 20:45:21 three

如何使一个textarea元素看起来像正常文本

回答

相关问题