Question

我有以下JavaScript动态生成文本输入并将它们插入到div中。此代码工作正常，但如果我在字段中键入文本，然后单击按钮添加另一个字段我丢失了我在第一个字段中键入的文本。

我做了一个jFiddle - 但由于某种原因，它不起作用。相同的代码在我的浏览器中工作正常。

这是有问题的功能：

var optCount = 0;
function addOption(type){
    var cont = document.getElementById('new'+type+'Opts');
    cont.innerHTML = cont.innerHTML + "<span style='display:block;' id='opt" + optCount + "'><input type='text' style='width:80%;' /><a href='#' style='color:red; text-decoration:none; font-size:.6em;' onclick=\"return delOpt('opt" + optCount + "');\">[x]</a><br /></span>";
    optCount++;
    return false;
}

添加其他字段时如何维护现有字段的值？

Answer 1

每次都不要替换div的全部内容。相反，只需创建新选项并附加它即可。

var cont = document.getElementById("new"+type+"Opts");
var span = document.createElement('span');
span.className = 'block';
span.id = "opt" + optCount;
span.innerHTML = "<input type='text' class='width80' /><a href='#' class='dellink' onclick=\"return delOpt('opt" + optCount + "');\">[x]</a><br />";
optCount++;
cont.appendChild(span);

http://jsfiddle.net/ExplosionPIlls/PBp4g/5/

在动态生成的字段中维护输入值

1 个答案: