Question

为了使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;等等没有解决这个问题，只是让用户也无法在div中选择文本。如果需要更多CSS代码，我会对其进行评论，但我认为这不是必要的。

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

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

Answer 1

为了扩大<textarea>风格化的能力，一个好的起点是反思：制作一个<div>可编辑......

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

那不是＆＃34;魔杖＆＃34;，它有它的缺点，但它是一个很好的起点。

Answer 2

您不能在textarea中放置格式，但您可以使用可编辑的div并删除textarea。它至少会使问题更简单。

请参阅此问题：editable div

Answer 3

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

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

Answer 4

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

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

阻碍textarea的文本

4 个答案: