替换输入字段的显示

Question

我正在尝试编写一个轻量级的html / javascript小部件，它允许我在输入时为每个字符着色。我认为这样做的方法是让一个输入字段对事件做出反应，但其实际显示由一个html div覆盖，该div读取输入字段的值，突出显示它并将其写出来。这是推荐的做事方式吗？是否有一个已经实现了这个的库，并处理我可能没有想到的任何细节？

编辑：搜索实现cronoklee内容的方法可爱的想法提出了这篇不错的文章：http://perplexed.co.uk/993_contenteditable_cross_browser_wysiwyg.htm

Answer 1

这可能是有趣的： http://www.w3.org/TR/html5/editing.html#contenteditable

我可能会设置一个contenteditable div，并在keypress上调用javascript函数，将最后输入的字符包装在样式化的span标签中。如果您需要提交输入的数据，请设置输入类型='隐藏'并在按键上填充。不需要在另一个上覆盖一个！

编辑： 我刚刚意识到（几个月后！）你可以简单地使用div.textContent来获取输入的内容。这只会显示没有样式的文本，因此不需要额外的输入字段来捕获字符。

Answer 2

如果你想要语法荧光笔/编辑器，真的很好。有一个演示：http://ajaxorg.github.com/ace/build/editor.html

Answer 3

这听起来很麻烦，因为收益不大。我个人喜欢stackoverflow的方式，使用textarea和onblur，他们将突出显示应用于预览。