0

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

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

例如：

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

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

我想要实现的是，当我在文本框中输入一个值时，它会将文本区域中的占位符更改为正在输入到文本框中的内容。考虑一下用于 textarea 的 sublime 文本编辑器的片段。

我试图弄清楚如何跟踪文本区域中的占位符。例如，如果一个占位符是<first_name>并且我开始在占位符文本框中输入“比利”。我可以使用字符串替换功能轻松更改占位符。但是现在<first_name>文本区域中不存在占位符，所以现在我不能回去更改它。我需要有一种方法可以在这些占位符发生变化时跟踪它们。

我希望这是有道理的。

4

2 回答 2

1

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

我在 jsfiddle 上设置了一个演示，试试看。

于 2013-04-11T13:28:17.007 回答
0

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

如果您必须使用 atextarea并且用户只能使用外部输入修改它的内容，那么您可能最初可以跟踪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用户所做的每一次修改更新占位符的 ，并且您还必须阻止他们直接编辑占位符映射的文本。

于 2013-04-11T13:11:33.547 回答