html textarea，最后是常量静态不可编辑的只读文本

Question

在感知的文本输入中具有各种跨度/ div的“假”文本输入现在风靡一时。看看Stackoverflow。要在此标记此问题，我将输入h-t-m-l-＆lt; space＆gt;它会将其转换为令牌/过滤器/标签。这很容易做到，将带有边框的外部div看起来像文本输入，隐藏真实文本输入的边框，并将div中的点击/焦点事件发送到文本输入。热潮，你已经完成了。 Example

我需要在输入和之后使用静态文本我需要多行。我很确定我可以通过上面的文本输入示例在输入之后使用静态文本进行轻微按摩。但是走多线似乎真的很难。如果你去多线，你必须使用textareas（这总是如此吗？）。这是我想要的图像：

整个区域看起来像是用户的文本区域。 （背景颜色只是为了帮助解释这个问题）。想象一下，最初没有绿色文字，但红色文字却在那里。用户单击黑色边框内的任何位置，他的光标将转到右上角，就像普通的空文本区域一样。然后他打字，红色文字继续前进。如果用户点击，例如“追加”，则他的光标会在最后一个绿色时段之后，而不是在“附加”一词中。光标只能位于绿色部分。

如果将单行文本输入的解决方案扩展到此，则可以说绿色将是文本区域，红色将是div，黑色边框将是容器div。但是所有的div都必须是逆向的（我认为）。 This是我的天真尝试，采用与上述类似的解决方案。但是这有很多问题。红色的第一行如何从中间开始，然后第二行在左边齐平？这是jsfiddle上的内容：

div{
    width:200px;
    border:1px solid #000;
}
textarea{
    border:none;
    font-size:12px;
}
label{
    cursor:text;
    font-size:12px;
}

<div>
<textarea id="textarea">this is what the user entered</textarea>
<br>
<label for="textarea">This is my constant text</label>
</div>

我将使用javascript动态填充红色，但出于这个问题的目的，我认为只考虑静态的，常量的html。

这可以解决吗？

Answer 1

1）创建 textarea

2）将静态文本存储在变量中。

3）使用静态文本变量填充 textarea

4）当用户开始在 textarea （ ie： onkeydown事件，鼠标事件..）中进行书写时，请删除静态内容。将动态内容存储在新变量中，并在用户保持键入时不断更新。同时在 textarea 中，仅在用户停止输入后添加动态内容后的静态文本（ ie： onkeyup事件）。继续重复这个过程。

<强>计算：

  

动态文字= textarea的长度的总文字 - 静态文字的长度