文本阻碍文本区域

Question

为了使文本区域处理一些基本格式，我在其上放置了一个 div，并使用相同的等宽字体和位置。 div 将显示相同的文本，但颜色和粗体。

但是，div 内的文本会阻碍并使用户无法 select 文本区域内的文本。

<div class="centerc">
    <div class="copyc">
        <textarea id="input" class="ipadded epadded txtarea" rows=20 cols=80></textarea>
        <div id="copyadd" class="copyadd"></div>
        <!--THIS IS THE DIV FOR FORMATTING ^ -->
    </div>
</div>

-webkit-user-select:none;-ms-user-select:none;user-select:none; etc 没有解决这个问题，只是让用户也无法在 div 中输入 select 文本。如果需要更多 CSS 代码，我会对其进行评论，但我认为这不是必需的。

如何阻止 div 使用户无法从文本区域 select 文本（如果可能的话）？如果没有，我使用的方法是否有任何替代方法？

编辑：我应该从一开始就明确我想要多种格式。

Answer 1

例如，您可以添加一个 CSS 规则，当用户将鼠标悬停在父 div 上方时，将文本区域放在 div 前面，就像这样:

.copyc:hover txtarea {
z-index: 2;
}

Answer 2

为什么不在 textarea 中添加一些 css 来完成 div 试图完成的事情。

.dark-text {
    font-weight: bold;
    font-color: black;
}

Answer 3

为了扩展 <textarea> 的风格化能力，一个好的起点是相反的想法：使 <div> 可编辑...

<div id='divTextEditable' contenteditable></div>

这不是 "the magic wand"，它有其缺点，但它是一个很好的起点。

Answer 4

您不能将格式放在文本区域中，但您可以使用可编辑的 div 并摆脱文本区域。至少会让问题简单化。

看到这个问题：editable div

文本阻碍文本区域

Text obstructing a textarea

html

javascript

css

textarea

richtextbox