如何創建簡單的自動代碼生成器？

我想創建一個簡單的表單，其中人們輸入一些值，並在提交自動生成窗體下面的代碼。然後他們可以複製使用。如何創建簡單的自動代碼生成器？

即

Input 1 width(px) - 200 

Input 2 height(px) - 300 

Input 3 content - Hello world

提交按鈕

[code to copy] 

[div width="200px" height="300px"]Hello world[/div] 

[/code to copy]

來源

2011-05-10 muudles

你試圖建立/使用解析器？ – 2011-05-10 01:28:52

謝謝Jared！這正是我想要建立的。我只是不知道要搜索什麼。 – muudles 2011-05-10 01:33:54

這可以實時完成，不需提交。

這裏：http://jsfiddle.net/NzFeb/

$("input").keyup(function() { 
    $("#result").text(
     '<div width="' + $("#width").val() + 
     'px" height="' + $("#height").val() + 
     'px">' + $("#content").val() + 
     '</div>'); 
});

爲了簡化我使用的庫的jQuery的代碼。

來源

2011-05-10 01:32:32 ariel

很好地完成。 +1 – 2011-05-10 01:37:04

不過，您可能想提及一些關於jQuery的內容。 – 2011-05-10 01:38:49

非常感謝！這正是我所追求的。我怎樣才能在同一頁面上擁有多個這樣的內容？ – muudles 2011-05-10 01:48:16

嘗試：

Width: <input id="width" type="text" /> <br/><br/> 
Height: <input id="height" type="text" /> <br/><br/> 
Content: <input id="content" type="text" /><br/><br/> 
<button id="go">Go</button><br/><br/> 
<textarea id="code" cols="30" rows="10" ></textarea> 
document.getElementById("go").onclick = function() { 
document.getElementById("code").innerHTML = "<div style='width:" + document.getElementById("width").value+ "; height:" + document.getElementById("height").value + ";'>" + document.getElementById("content").value + "</div>";

};

如下所示：http://jsfiddle.net/69q57/13/

來源

2011-05-10 01:37:08

謝謝你，你太棒了！ – muudles 2011-05-10 01:58:47

@Muddles樂於幫助。不要忘記投票給出有用的答案，並且標記爲答案，無論你最終結果如何。 – 2011-05-10 02:00:21

如何創建簡單的自動代碼生成器？

回答

相關問題