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

Maintaing Input Values in Dynamically Generated Fields

本文关键字：输入 字段 动态 维护      更新时间：2023-09-26

我有以下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;
}

如何在添加新字段时保持现有字段的值?

不要每次都替换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/

相关文章：