我可以在 <textarea> 中添加 <span> 并使其有用吗？答案

【问题标题】：can I add <span> inside <textarea> and make it useful?我可以在 <textarea> 中添加 <span> 并使其有用吗？
【发布时间】：2017-01-17 03:57:54
【问题描述】：

<!DOCTYPE html>
<html>
<head>
    <style>
        span {
            color: red;
        }
    </style>
</head>
<body>

        <textarea readonly cols=200 rows=40>
            <span>
                hahahahaha
            </span>
        </textarea>

</body>
</html>

在这个例子中，有没有办法让<span>中的文字变成红色还是可以通过<textarea>等其他html标签来完成？

【问题讨论】：

您是在尝试实现 textarea 占位符还是什么？
如果是只读的，为什么需要它作为textarea？
看这个：stackoverflow.com/questions/12831101/format-text-in-a-textarea 和这个：stackoverflow.com/questions/926723/tags-inside-textarea。它们基本上为您提供了使用 contenteditable div 的相同选项。
它被称为文本区域，而不是html区域。
可以使用 contenteditable 元素来分隔文本样式。这是动态着色特定字符的小提琴：codeply.com/go/YHx9yphpHW

标签： css html tags

【解决方案1】：

不，您不能将 HTML 元素放在表单字段标记内，例如 textarea 或 input。但是，您可以使用普通 CSS 将 textarea 中的颜色设为红色。

textarea {
  color: red;
}

&lt;textarea&gt;text&lt;/textarea&gt;

【讨论】：

【解决方案2】：

您还可以使用另一种方法是调整占位符属性的样式。

链接到jsfiddle

希望这会有所帮助。

::-webkit-input-placeholder {
   color: red;
}

:-moz-placeholder { /* Firefox 18- */
   color: red;  
}

::-moz-placeholder {  /* Firefox 19+ */
   color: red;  
}

:-ms-input-placeholder {  
   color: red;  
}

Who are you?<br />
<textarea readonly rows="4" cols="50" placeholder="Describe yourself here..."></textarea><br />
<input type="text" placeholder="red" />

【讨论】：

【解决方案3】：

好的，现在我知道我无法插入

我还有别的办法

<style type="text/css"> 
        .testDiv{ 
            bottom: 36px;
            height: calc(100vh - 280px);
            resize: none;
            overFlow-x:scroll; 
            overFlow-y:scroll; 
        } 
        .keyword{
            color:red;
        }
</style> 

<div class='testDiv' id="keyword">
            one<br>
            two<br>
            three<br>
            <span class="keyword">four</span><br>
</div>

只需在 div 中添加滚动、高度 css

【讨论】：