Question

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

即。

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]

Answer 1

这可以实时完成，无需提交。

此处：http://jsfiddle.net/NzFeb/

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

为了简化我使用库jQuery的代码。

Answer 2

尝试：

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/

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

2 个答案: