替换输入字段的显示

我正在尝试编写一个轻量级的html/javascript小部件，它可让我在输入每个字符时对其进行着色。我在想，实现它的方法应该是有一个对事件有反应的输入字段，但是其实际显示由一个html div覆盖，该html div将读取输入字段的值，将其突出显示并写出。这是推荐的做事方式吗？有没有一个图书馆已经实现了这一点，并照顾我可能没有想到的任何细节？替换输入字段的显示

编辑：寻求新的方式来实现cronoklee的CONTENTEDITABLE想法提出了这个漂亮的文章：http://perplexed.co.uk/993_contenteditable_cross_browser_wysiwyg.htm

来源

2011-04-11 Martin DeMello

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

我可能会成立一个CONTENTEDITABLE DIV，并调用JavaScript按钮上的功能将最后输入的字符包裹在样式化的span标签中。如果您需要提交输入的数据，请设置输入类型='隐藏'并在按键时输入。无需重叠一个！

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

来源

2011-04-11 18:48:04 cronoklee

这听起来有点太强大了 - 我不想让用户在我的文本框中输入任意的html，我希望我自己的回调函数在他进入或修改它时突出显示他的文本。 – 2011-04-11 18:50:59

那么使用我上面描述的系统，你可以将输入过滤为只有你指定的字符。您甚至可以完全禁用编辑，并在用户输入时使用javascript填充div。这意味着他们不会看到一个可用性问题的插入符号。 – cronoklee 2011-04-11 18:54:59

HM - 好吧，我明白你要去哪里了。好主意，我可以免费获得div的任意样式。 – 2011-04-11 19:34:36

这听起来很麻烦，没有太多的收获。就我个人而言，我喜欢用stackoverflow来做它，使用textarea和onblur，他们将突出显示应用于预览。

来源

2011-04-11 18:51:23 daniellmb

这是一个在线文字游戏;例如，如果用户已经开始输入无效的文本（文本应该变成红色字母）以及其他全局条件，则需要实时反馈（因此，您可以输入某些内容并且字符串的不同部分会颜色本身） – 2011-04-11 19:31:07

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

来源

2011-04-11 18:54:03 penguinrob

再次，太重 - 我想要的是通过一些回调彩色文本，而不是一个完整的编辑器，甚至是一个词法分析器。 – 2011-04-11 19:31:51

替换输入字段的显示

回答

相关问题