带有常量静态不可变参数的html textarea只读文本末尾

在认为文本输入内有各种跨度/ div的“假”文本输入，这些日子都是风靡一时。看看Stackoverflow。为了在这里标记这个问题，我打算输入h-t-m-l- <space>，它会将它变成令牌/过滤器/标记。这很容易做到，将带有边框的外部div看起来像文本输入，为实际文本输入隐藏边框并将点击/焦点事件从div发送到文本输入。繁荣，你完成了。 Example 带有常量静态不可变参数的html textarea只读文本末尾

我有一个需要有输入和后，我需要这是多行的静态文本。我敢肯定，我可以得到上面的文本输入示例，以便在输入后使用静态文本进行轻微按摩。但去多线似乎是真的硬。如果你使用多行，你必须使用textareas（这总是正确的？）。下面是我想要的图像：

enter image description here

整个区域看起来就像一个textarea给用户。（背景颜色只是为了帮助解释问题）。想象一下，最初没有绿色的文字，红色的文字在那里。用户点击黑色边框内的任何位置，光标就会移到右上角，就像普通的空白文本区域一样。然后他键入，红色文字一直移动。如果用户点击“追加”，他的光标会在最后一个绿色时段后右移，而不是在“追加”一词中。光标只能在绿色部分。

如果将单行文本输入的解决方案扩展为此，则可以说绿色是文本区域，红色是div，黑色边框是容器div。但所有divs必须是retangular（我认为）。 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。

这是可以解决的吗？

来源

2013-04-23 Landon

对不起的长度，但你尝试过什么吗？否则，它似乎只是你要求一个完整的解决方案，而没有任何尝试c.c – Daedalus 2013-04-23 00:20:36

也许你可以尝试将红色文本存储为一个变量，并替换/删除，然后将它追加到键盘和鼠标点击当前键入文本的末尾。这样红色的文字总是添加到最后。 – lukeocom 2013-04-23 00:37:25

当然，请参阅jsfiddle的链接，但我只是将代码移到了这里，供您细读 – Landon 2013-04-23 00:38:30

1）创建textarea的

2）存储变量里面你静态文本。

3）填充您的的textarea与静态文本变量

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

计算：textarea的的总文字的

动态文本=长度 - 静态文本

来源

2013-04-23 01:37:44

谢谢你的想法。这是否意味着静态文本会“闪烁”或在某些点不可见？基于你的描述，keydown会删除它，并且keyup会把它放回去？这不会闪动静态值吗？ – Landon 2013-04-23 18:03:39

@Landon，会的。但它会是暂时的。所以，影响很难被注意到。 – 2013-04-23 22:43:00

带有常量静态不可变参数的html textarea只读文本末尾

回答

相关问题