如何创建简单的自动代码生成器？

我想创建一个简单的表单，其中人们输入一些值，并在提交自动生成窗体下面的代码。然后他们可以复制使用。如何创建简单的自动代码生成器？

即

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

如何创建简单的自动代码生成器？

回答

相关问题