如何根据用户输入和显示预览预填充文本区域？

Question

我有一堆输入表单，如电子邮件、姓名、消息等。我已将所有字段设为必填。 jquery 是否可以使用来自其他表单的输入预填充消息文本区域，但用户仍然可以编辑 some 文本？我的目标是提供一种基于用户输入+其他信息的 div 预览。预览的目标是向用户显示提交时他/她的邮件在电子邮件中的样子。 下面的字段示例

 Name: John Doe
 email: johndoe@example.com
 Institution: Institute of Aquaculture

我想在消息文本区域中预填：

To Whom It May Concern:    

Please supply document: {Item requested}. Retrieved from 
{Referring Page}.

I will use the requested material only for private study, scholarship or
research.

Regards,
John Doe<johndoe@example.com>

如果用户对文本区域的内容不满意并想添加其他信息，可以编辑文本区域的内容。

我希望显示 div 预览：

**This is the text to be sent to the responsible person.**

To Whom It May Concern:    

Please supply document: {Item requested}. Retrieved from 
{Referring Page}

I will use the requested material only for private study, scholarship or
research.

Regards,
John Doe<johndoe@example.com>

Name: {From input form}
Institution: {From input form}
Item requested: {Generated automatically}
Logged In As: {from input form}
Referring Page: {Generated automatically}

请注意，请求的项目和推荐页面是自动生成的。我在stackoverflow 中搜索了how to pre-fill/populate a textarea 和how to generate a preview based on input forms，但不知何故我不知道如何将这两者结合起来。关于如何实现这一目标的任何建议，或者这是否可能？提前致谢。

Answer 1

基本上，为了预填充文本区域，创建一个字符串，然后替换输入中的值。在这个例子中，我在 2 个冒号之间加上了以后替换的词：

var text = "Some text here, this is the :name: from input";

text = text.replace(':name:', $('#name').val());

查看jsfiddle上的完整示例