如何更改和跟踪对文本区域的更改答案

【问题标题】：How to change and track changes to a textarea如何更改和跟踪对文本区域的更改
【发布时间】：2013-04-11 22:23:06
【问题描述】：

我发现很难为这个问题想出一个问题的标题，所以我很抱歉它相当神秘，但我会尝试在那里更好地解释。

基本上，我正在开发的应用程序的一部分涉及将“占位符”放置在文本区域中，然后在文本区域之外修改这些占位符。

例如：

This is the <first> placeholder. This is the <second> placeholder.
This is the <first> placeholder again.

基本上我有 JS 来检测这些占位符并创建输入框来保存文本。所以会有一个first输入文本框和一个second输入文本框。

我想要实现的是，当我在文本框中输入一个值时，它会将文本区域中的占位符更改为正在输入到文本框中的内容。想想 sublime 文本编辑器对 textarea 的 sn-ps。

我正在尝试弄清楚如何跟踪文本区域中的占位符。例如，如果占位符是<first_name>，我开始在占位符文本框“Billy”中输入内容。我可以使用字符串替换功能轻松更改占位符。但是现在占位符<first_name> 在文本区域中不存在，所以现在我不能回去更改它。我需要有办法在这些占位符发生变化时对其进行跟踪。

我希望这是有道理的。

【问题讨论】：

你能显示一些代码吗
你必须使用textarea吗？在div 中使用span 元素会容易得多！
@Dolours 我还没有任何好处。我正在尝试在写任何东西之前解决问题
@BenM 如果可能的话，我真的很想使用 textarea，因为我希望他们可以很容易地修改文本

标签： javascript jquery

【解决方案1】：

如果您没有绑定到 <textarea> 元素，您可以尝试使用属性为 contenteditable="true" 的简单 div。这样您就可以使用一些<span> 来标记所有占位符。

我设置了demo on jsfiddle，试试看。

【讨论】：

感谢这很好用。（我不得不稍微修改一下代码；v1 的值被传递到 v2 中）。我完全忘记了 contenteditable 属性！

【解决方案2】：

使用带有contenteditable="true" 的元素更容易完成该任务，因为您可以将占位符表示为span 元素，然后您只需通过id 或任何其他独特的attribute 检索它们以更新它们内容。

如果您必须使用textarea 并且用户只能使用外部输入修改其内容，那么您可能最初可以跟踪每个占位符的index 及其length 并保持那些随着值的变化而同步的。

然后您可以轻松替换 textarea 中的内容。例如，如果占位符从 15 开始，长度为 13。

    var string = 'this is a test {placeholder} bla bla bla',
        placeHolderIndex = 15,
        placeHolderLength = 13;

    string = 
        string.substring(0, placeHolderIndex) 
        + 'new value' 
        + string.substring(placeHolderIndex + placeHolderLength);

//update indexes of every placeholders that comes after this 
//one and update the content length of this placeholder.

显然，您不想硬编码任何值，而是希望以动态方式处理此过程，但这只是一个示例。

注意：如果您使用的是textarea 内容，我猜想用户可以修改它。在这种情况下，它会使事情变得更复杂一些，因为您必须为用户所做的每一次修改更新占位符的index，并且您还必须阻止他们直接编辑占位符映射的文本。

【讨论】：