0

如今，在感知的文本输入中包含具有各种跨度/div 的“假”文本输入已经风靡一时。看看堆栈溢出。要在此处标记此问题，我将键入 html-<space>，它会将其转换为令牌/过滤器/标记。这很容易做到，将带有边框的外部 div 看起来像文本输入，隐藏真实文本输入的边框并将点击/焦点事件从 div 发送到文本输入。砰，你已经完成了。 例子

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

在此处输入图像描述

整个区域对用户来说就像一个文本区域。（背景颜色只是为了帮助解释问题）。想象一下最初没有绿色文本，但红色文本在那里。用户点击黑色边框内的任何地方，他的光标就会转到右上角，就像一个普通的空文本区域。然后他打字，红色的文字一直在移动。如果用户点击，比如说，“附加”，他的光标就在最后一个绿色句点之后，而不是在“附加”这个词中。光标只能在绿色部分。

如果将单行文本输入的解决方案扩展到此，您会说绿色是文本区域，红色是 div，黑色边框是容器 div。但是所有的 div 都必须是矩形的（我认为）。 这是我用与上述类似的解决方案进行的天真的尝试。但这有很多问题。红色的第一行怎么能从中间开始，然后第二行在左边齐平呢？这是 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 是节省的。

这可以解决吗？

4

1 回答 1

0

1）创建文本区域

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

3）用静态文本变量填充你的文本区域

4）当用户开始在文本区域（即： onkeydown 事件、鼠标事件..）中写入时，擦除您的静态内容。将动态内容存储在一个新变量中，并在用户不断输入时不断更新它。同时在textarea中，仅在用户停止输入后才在动态内容之后附加静态文本（即： onkeyup 事件）。不断重复这个过程。

计算：

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

于 2013-04-23T01:37:44.727 回答