javascript - 替换输入字段的显示

标签 javascript html

我正在尝试编写一个轻量级的 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/

相关文章:

javascript - 在 Safari (Windows) 中使用 html5/js 音频时出现问题

javascript - 如何在 jQuery 中调试预期的 DOM 行为?

css - 删除 div 标签之间的空格

HTML5 GEOLocation 第二个提示

javascript - 将 dojo 数据网格导出到 CSV 文件

javascript - 在 JavaScript 中动态构建表单字段名称并分配值

javascript - 所有浏览器的 CSS 渐变简化

javascript - toDataURL 返回错误值,其中包含大量 "A"

javascript - 创建带有搜索选项的选择框

html - 当我滑动内容的 slider 时,如何使 ionic 段可滑动