替换输入字段's显示

replacing an input field's display

本文关键字：显示输入字段替换更新时间：2023-09-26

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

编辑:在寻找实现cronoklee的contentitable想法的方法时，提出了这篇不错的文章:http://perplexed.co.uk/993_contenteditable_cross_browser_wysiwyg.htm

您可能会感兴趣:http://www.w3.org/TR/html5/editing.html contenteditable

我可能会设置一个可满足内容的div，并在keypress上调用javascript函数，将最后输入的字符包装在样式span标签中。如果您需要提交输入的数据，设置输入类型='hidden'并在按下键时填充它。不需要将一个叠加在另一个上!

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

如果你想要一个语法高亮/编辑器，是非常好的。这里有一个演示:http://ajaxorg.github.com/ace/build/editor.html

听起来很麻烦，但收效甚微。就我个人而言，我喜欢stackoverflow的方法，使用textarea和onblur，他们将高亮应用到预览中。