如何根據用戶輸入和顯示預覽預先填寫一個textarea？

我有一堆像電子郵件，名稱，消息等輸入形式。我已經使所有的字段是強制性的。是否有可能與jQuery的預填充信息textarea與其他形式的輸入，但用戶仍然可以編輯一些文本？我的目標是根據用戶的輸入+其他一系列信息提供一種div預覽。預覽的目標是在提交時向用戶展示他/她的郵件在電子郵件中的樣子。例以下領域如何根據用戶輸入和顯示預覽預先填寫一個textarea？

Name: John Doe 
email: [email protected] 
Institution: Institute of Aquaculture

的，我想用預填信息的textarea：

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<[email protected]>

用戶可以編輯textarea的內容，如果他/她是不是對內容感到滿意，並會喜歡添加其他信息。

我想股利預覽顯示：

**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<[email protected]> 

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

請注意，項目要求和參考自動生成頁面。我在how to pre-fill/populate a textarea和how to generate a preview based on input forms的stackoverflow中搜索，但不知怎的，我不知道如何結合這兩個。有關如何實現這一目標的任何建議或完全可能？提前致謝。

來源

2014-10-10 euler

像這樣完整的例子嗎？ http://jsfiddle.net/qcxmb75z/ – rogelio 2014-10-10 04:20:42

@rogelio，是的，你可以請你發佈你的答案，以便我可以接受它嗎？我前一段時間只是想到了它，但是你的代碼更加清晰。你還可以編輯你的代碼，以便它會生成div預覽？非常感謝！ – euler 2014-10-10 04:33:53

好的，看我的更新：D – rogelio 2014-10-10 05:20:31

基本上，爲了預先填充textarea，創建一個字符串，然後替換輸入中的值。在這個例子中，我2個冒號字之間封閉供以後更換：

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

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

查看jsfiddle

來源

2014-10-10 05:24:55 rogelio

只是爲了完成我的回答。用'text.replace（/：name：/ g，「the_text」）''你可以替換所有出現的：name：' – rogelio 2014-10-10 15:32:37

如何根據用戶輸入和顯示預覽預先填寫一個textarea？

回答

相關問題