如何在文本字段中保留文本

How to retain a text in textfield

本文关键字：文本 保留 字段      更新时间：2023-09-26

我有一个链接，链接的目的是在我点击它时动态添加一个文本字段。但问题是，如果我在以前生成的文本字段中输入了文本并点击了链接，则会生成文本字段，但页面会刷新，输入的文本会重置。

html文件

<script>
    var countBox =3;
    var boxName = 0;
    function addInput()
    {
        var boxName="textBox"+countBox; 
    document.getElementById('responce').innerHTML+='<br /><input type="radio" name="choices"  value="o'+countBox+'" id="o'+countBox+'"/><label>Option '+countBox+':</label> <input type="text" id="option'+countBox+'" name="option'+countBox+'"" placeholder="Enter here..."  /><br/>';
        countBox += 1;
    }
</script>
<br /><a href="javascript:void()" onclick="addInput()">Add another</a>(max.5)

如何在添加文本字段的同时保留文本字段中的文本。希望你能理解我的问题

提前谢谢。

页面是而不是刷新的，所以这不是问题所在。问题是您正在使用.innerHTML +=来添加新元素。这将销毁并重新创建现有元素：元素被序列化为HTML，然后连接字符串以添加新的HTML，在分配之后，浏览器必须解析HTML以再次创建DOM元素。在此过程中，所有数据都将丢失。

请改用DOM操作方法。即用document.createElement创建元素，并用Node.appendChild添加它们。

使用.innerHTML覆盖现有内容或首次初始化元素是可以的。但使用它来将元素添加到现有元素可能会导致问题（如上所述），因此在这种情况下最好避免。

示例：

function addInput() {
    var boxName="textBox"+countBox; 
    var input = document.createElement('input');
    input.id = input.name = 'option'+countBox;
    var parent = document.getElementById('responce');
    parent.appendChild(document.createElement('br'));
    parent.appendChild(input);
    // create/add other elements...
    countBox += 1;
}

或者两者兼而有之：

function addInput() {
    var boxName="textBox"+countBox; 
    var container = document.createElement('div');
    container.innerHTML = '<input type="radio" name="choices"  value="o'+countBox+'" id="o'+countBox+'"/><label>Option '+countBox+':</label> <input type="text" id="option'+countBox+'" name="option'+countBox+'"" placeholder="Enter here..."  />';
    document.getElementById('responce').appendChild(container);
    countBox += 1;
}
相关文章：