【问题标题】:Set word background color in textarea在 textarea 中设置文字背景颜色
【发布时间】:2013-08-06 09:21:37
【问题描述】:

我希望用不同颜色突出显示文本区域中的单词和短语,如下所示:

你会如何建议我这样做?如果不能使用 textarea,您会推荐什么?

我的应用程序将使用此文本区域使客户能够输入短篇故事。应用程序将根据它们的频率对单词和短语进行着色。我会将文本区域中的所有单词存储在一个数组中,例如文本:

"Once upon a time, I met a woman called Nora. She was "

将在内部表示为:

"once", "upon", "a", "time", "i", "met", "a", "woman", "called", "nora", "she", "was"。 然后在应用适当的颜色时使用这个数组。

我将通过一个单独的问题询问在文本更改时更新数组的有效方法,但在回答此问题时请记住这一点。

【问题讨论】:

  • <textarea> 不能这样做;您可能希望将<div>contenteditable 一起使用。
  • 我很想看到这个问题的答案。我觉得它与上面提到的“在

标签: html textarea


【解决方案1】:

文本区域可能是错误的做法。

我建议使用普通的除法或类似元素,然后将您想要突出显示的内容包装在 <span> 中,并为每种颜色设置一个类。您可以启用contenteditable 以允许用户编辑元素内的文本。

例子:

<div contenteditable="true">
    This is some text. I am <span class="blue">highlighting it</span>. It's <span class="yellow">pretty obvious</span> isn't it?
</div>

如果您想要 textarea 的外观,只需在 CSS 中将您的样式应用到 textarea 和此元素即可。

【讨论】:

    【解决方案2】:

    将数组中的所有文本显示到 div 元素中。

    对于您希望被选中的每个元素,将文本包装在 span 元素内。

    根据你想要的颜色设置 span 元素的背景颜色。

    【讨论】:

      猜你喜欢
      • 2017-10-16
      • 2013-04-02
      • 2013-07-29
      • 1970-01-01
      • 1970-01-01
      • 2019-01-25
      • 1970-01-01
      • 2011-03-25
      • 2012-10-16
      相关资源
      最近更新 更多