阻碍文本区域的文本答案

【问题标题】：Text obstructing a textarea阻碍文本区域的文本
【发布时间】：2017-10-27 19:43:40
【问题描述】：

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

但是，div 内的文本会阻碍并让用户无法选择 textarea 内的文本。

<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 中选择文本。如果需要更多 CSS 代码，我会评论它，但我认为没有必要。

如何阻止 div 使用户无法从 textarea 中选择文本（如果可能的话）？如果没有，我使用的方法有什么替代方法吗？

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

【问题讨论】：

不完全是一个答案，但 quill.js quilljs.com 可能对你有帮助
你也可以添加CSS吗
@TemaniAfif 我想我已经得出结论了，所以不用担心，但无论如何谢谢。

标签： javascript html css textarea richtextbox

【解决方案1】：

您不能将格式设置在 textarea 中，但您可以使用可编辑的 div 并摆脱 textarea。它至少会使问题变得更简单。

看到这个问题：editable div

【讨论】：

这似乎是一个可行的选择；谢谢！我将如何完成多种类型的格式化？

【解决方案2】：

为了扩大<textarea> 的风格化能力，一个好的起点是反其道而行之：使<div> 可编辑...

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

这不是“魔杖”，它有它的缺点，但它是一个很好的起点。

【讨论】：

使用内容可编辑的pre 元素，模拟文本区域会容易得多。
如果可以的话，我也会接受这个答案，我猜另一个人只是有更多的信息。我怎么能有多种类型的格式呢？

【解决方案3】：

为什么不向textarea 添加一些css 来完成div 试图完成的任务。

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

【讨论】：

我想将 textarea 的不同部分格式化为不同的颜色等。我相信这对于 textarea 是不可能的。

【解决方案4】：

例如，您可以添加一个 CSS 规则，当用户将鼠标悬停在父 div 上时，将文本区域放在 div 前面，如下所示：

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

【讨论】：

我不确定我是否完全理解“当 div 悬停在父 div 上时”的意思。你的意思是当光标悬停在文本区域上时？
对不起，我就是这个意思