我正在尝试编写一个轻量级的 html/javascript 小部件,它可以让我在输入时为每个字符着色。我认为这样做的方法是有一个对事件使用react的输入字段,但其实际显示由一个 html div 覆盖,该 html div 读取输入字段的值,突出显示它,然后将其写出。这是推荐的做事方式吗?是否有一个库已经实现了这一点,并处理了我可能没有想到的任何繁琐的细节?
编辑:寻找实现 cronoklee 的 contentEditable 想法的方法带来了这篇好文章:http://perplexed.co.uk/993_contenteditable_cross_browser_wysiwyg.htm
最佳答案
这可能令人感兴趣: http://www.w3.org/TR/html5/editing.html#contenteditable
我可能会设置一个 contenteditable div,并在按键时调用一个 javascript 函数,该函数将最后输入的字符包装在样式化的 span 标签中。如果您需要提交输入的数据,请设置输入类型=“隐藏”并在按键时填充该输入类型。无需将一个叠加在另一个上!
编辑: 我刚刚意识到(几个月后!)您可以简单地使用 div.textContent 来获取输入的内容。这只会显示没有样式的文本,因此不需要额外的输入字段来捕获字符。
关于javascript - 替换输入字段的显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5625943/