动态添加输入字段后保留输入值

Preserve input values after dynamically adding an input field

本文关键字：输入 保留 字段 添加 动态      更新时间：2023-09-26

我正在制作一个可以添加额外输入字段的表单。代码如下：

.HTML：

<div class="wrapper-comp-setting" id="flashcard-list">
        <div class="fc-item">
          <label class="label setting-label" for="flashcards">Flashcard (1)</label>
          <input class="input setting-input" name="front" id="front" placeholder="Front" type="text" />
          <input class="input setting-input" name="back" id="back" placeholder="Back" type="text" />
        </div>
</div>
<input type="button" id="more_fields" onclick="add_fields();" value="Add flashcard" />

.JS：

var fc_number = 1;
function add_fields() {
    fc_number++;
    document.getElementById('flashcard-list').innerHTML += '<div class="fc-item"><label class="label setting-label" for="flashcards">Flashcard (' + fc_number + ')</label> <input class="input setting-input" name="front" id="front" placeholder="Front" type="text" />'n<input class="input setting-input" name="back" id="back" placeholder="Back" type="text" /></div>'r'n';
}

http://jsfiddle.net/hmxdmaL8/

我的问题是每次我添加一个新字段时，以前字段中的值都会消失。如何保留这些值？

感谢您的阅读。干杯！

小提琴

您不能在同一页面上有多个 ID #front和#back 。
您的问题是您正在重置和元素的内部HTML - 丢失输入状态和值

而是使用 https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML
使用 beforeend 属性，这样您只需将新创建的元素附加到 DOM

中即可 
<div class="wrapper-comp-setting" id="flashcard-list">
    <div class="fc-item">
        <label class="label setting-label" for="flashcards">Flashcard (1)</label>
        <input class="input setting-input" name="front" placeholder="Front" type="text" />
        <input class="input setting-input" name="back"  placeholder="Back" type="text" />
    </div>
    <!-- use insertAdjacentHTML on #flashcard-list -->    
</div>
<input type="button" id="more_fields" value="Add flashcard" />
<script>
    var addFieldButton = document.getElementById("more_fields");
    var flashCardList  = document.getElementById('flashcard-list')
    var fc_number = 1;
    function add_fields() {
        fc_number++;
        var fields = '<div class="fc-item">'n'
        <label class="label setting-label" for="flashcards">Flashcard (' + fc_number + ')</label>'n'
        <input class="input setting-input" name="front" placeholder="Front" type="text" />'n'
        <input class="input setting-input" name="back" placeholder="Back" type="text" />'n'
        </div>';
        flashCardList.insertAdjacentHTML("beforeend", fields );
    }
    addFieldButton.addEventListener("click", add_fields);
</script>

您的另一个问题是"为什么您不能在调用onclick事件的按钮之后（就像之前一样</body>）使用函数设置<script>"：
这是在解析时onclick="add_fields();"找不到要绑定到的函数的原因。像我一样使用，保持模板的内联JS干净，并将事件委托与addEventListener一起使用

你可以

试试，

.HTML：

<div class="wrapper-comp-setting" id="flashcard-list">
    <div class="fc-item" data-index='1'>
      <label class="label setting-label" for="flashcards">Flashcard (1)</label>
      <input class="input setting-input" name="front" placeholder="Front" type="text" />
      <input class="input setting-input" name="back" placeholder="Back" type="text" />
    </div>
</div>
<input type="button" id="more_fields" value="Add flashcard" />

Javascript：

$('#more_fields').click(function() {
    var x = $('#flashcard-list');
    var last_row_index = $('#flashcard-list div').last().data('index');
    var new_no = last_row_index + 1;
    var newrow = $('#flashcard-list div').last().clone(true);
    newrow.data('index', new_no);
    newrow.find('.label').text('Flashcard ' + '(' + new_no + ')');
    newrow.find('input').val('');
    x.append(newrow);
});

http://codepen.io/anon/pen/yNXxQP

你可以试试jQuery insertAfter（）方法

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("<span>data inserted here</span>").insertAfter("p");
    });
});
</script>
</head>
<body>
<button>Insert value</button>
<p>one.</p>
<p>two.</p>
</body>
</html>


var fc_number = 1;
function add_fields() {
    fc_number++;
    debugger;
    $("#flashcard-list").append('<div class="fc-item"><label class="label setting-label" for="flashcards">Flashcard (' + fc_number + ')</label> <input class="input setting-input" name="front" id="front" placeholder="Front" type="text" />'n<input class="input setting-input" name="back" id="back" placeholder="Back" type="text" /></div>'r'n')
}
$("#more_fields").on("click",function(){
add_fields();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<!-- had to put the script here because I was getting a "add_fields() not defined" error. Anybody knows why? -->
<div class="wrapper-comp-setting" id="flashcard-list">
        <div class="fc-item">
          <label class="label setting-label" for="flashcards">Flashcard (1)</label>
          <input class="input setting-input" name="front" id="front" placeholder="Front" type="text" />
          <input class="input setting-input" name="back" id="back" placeholder="Back" type="text" />
        </div>
</div>
<input type="button" id="more_fields" onclick="add_fields();" value="Add flashcard" />

并为此使用 jquery 代码，这并不棘手，因为比如Javascript。它在这里工作得很好，很抱歉在 jQuery 中做出贡献。

相关文章：