如何防止在更改 innerHTML 时丢失输入数据？答案

【问题标题】：How to prevent the loss of input data on changing innerHTML?如何防止在更改 innerHTML 时丢失输入数据？
【发布时间】：2022-01-08 10:36:22
【问题描述】：

我有一个HTML code，如下所示。

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title>Notify Telegram | Mr. Developer</title>
        <link rel="stylesheet" href="https://www.toptal.com/developers/hastebin/raw/tozugoxeta.css">
        <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
        <link href="https://fonts.googleapis.com/css2?family=Pacifico&amp;family=Quicksand&amp;display=swap" rel="stylesheet" />
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    </head>
    <body>
        <form method="POST">
            <h1 class="title text-center mb-4">Talk to Us</h1>
            <!-- Name -->
            <!-- <div class="form-group position-relative"><label for="formName" class="d-block"><i class="icon" data-feather="user"></i></label><input type="text" id="formName" class="form-control form-control-lg thick" name="name" placeholder="Name" required></div> -->
            <!-- Channel ID -->
            <div class="form-group position-relative">
                <label for="formEmail" class="d-block">
                    <i class="icon" data-feather="mail"></i>
                </label>
                <input type="number" id="formEmail" class="form-control form-control-lg thick" name="channel_id" placeholder="Channel ID" required>
            </div>
            <!-- Message -->
            <div class="form-group message">
                <textarea id="formMessage" class="form-control form-control-lg" rows="7" name="message" placeholder="Your Message" required></textarea>
            </div>
            <input type="hidden" value="1" id="total_chq" name="total_buttons">
            <div id="select-box" class="text-center" style="justify-content: center"></div>
            <div id="inline-buttons" style="display: flex; flex-direction: row; justify-content: center;width:100%;flex-wrap:wrap"></div>
            <div class="text-center">
                <button type="button" onclick="addinline()" class="btn-spacing">Add</button>
                <button type="button" onclick="removeinline()" class="btn-spacing col-sm-4">Remove</button>
            </div>
            <br>
            <!-- Submit btn -->
            <div class="text-center">
                <button type="submit" class="btn btn-primary" tabIndex="-1">Send message</button>
            </div>
        </form>
        </div>
        <script src="https://unpkg.com/feather-icons"></script>
        <script src="https://www.toptal.com/developers/hastebin/raw/oleciriyiv.js"></script>
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
        <script src="https://kit.fontawesome.com/577845f6a5.js" crossorigin="anonymous"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    </body>
</html>

当用户使用 Add 按钮按下添加 4 文本框时。并输入所有文本，然后按删除按钮，然后所有添加的文本框中的输入文本也被删除...

点赞：

按Add button 2 次。
在所有新添加的文本框中添加文本。
按一次Remove button。
您会发现所有输入文本都从文本框中删除。

我会修复这个删除输入文本的问题。请建议我最好的方法。

希望我能让你明白。

在此先感谢❤️。

【问题讨论】：

标签： javascript html jquery cookies session-cookies

【解决方案1】：

为了隔离问题，我复制了 Add 和 Remove 按钮的 onclick 方法并重命名了它们。在我一步步测试项目的时候，我发现Remove按钮的onclick方法中使用的代码以及当前注释的代码导致了这个问题。我从oleciriyiv.js 文件中复制了按钮onclick 方法的原始版本（addinline() 和removeinline()）。下面是应用图片、编辑后的代码行和应用截图。

要解决问题，您可以直接使用我提供的解决方案，或者删除我在 oleciriyiv.js 文件中removeinline() 方法中指定的代码行。

function newRemoveInline() 
{
    var last_chq_no = $("#total_chq").val();

    if (last_chq_no > 1) 
    {
        var semi = last_chq_no - 1;
        $("#ne_" + semi).remove();
        $("#new_" + last_chq_no).remove();
        $("#total_chq").val(last_chq_no - 2);
    };

    var last_chq_no = $("#total_chq").val();

    if (last_chq_no == 1) 
    {
        select_box.innerHTML = "";
    }

    /* The following lines of code cause the contents of all entries to be deleted. */
    // var con = document.getElementById("inline-buttons");
    // var new_con = con.innerHTML.replaceLast("&nbsp;&nbsp;&nbsp;&nbsp;", "");
    // con.innerHTML = new_con;
}

function newAddInline() 
{
    var new_chq_no_1 = parseInt($("#total_chq").val()) + 1;
    var new_chq_no_2 = parseInt($("#total_chq").val()) + 2;
    var button_number = (parseInt($("#total_chq").val()) - 1) / 2;
    var new_input_1 = "<input type='text' class='form-control form-control-lg thick onerow col-sm-5' style='margin-bottom:10px;' placeholder='Button Text' name='btn_text_" + button_number + "' id='ne_" + new_chq_no_1 + "' required>&nbsp;&nbsp;&nbsp;&nbsp;";
    var new_input_2 = "<input type='url' class='form-control form-control-lg thick onerow col-sm-5 col-xs-offset-2' style='margin-bottom:10px;' placeholder='Button Link' name='btn_url_" + button_number + "' id='new_" + new_chq_no_2 + "' required>";
    
    $("#inline-buttons").append(new_input_1);
    $("#inline-buttons").append(new_input_2);
    $("#total_chq").val(new_chq_no_2);
    
    select_box.innerHTML = select_options;
};

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Notify Telegram | Mr. Developer</title>
    <link rel="stylesheet" href="https://www.toptal.com/developers/hastebin/raw/tozugoxeta.css">
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
    <link href="https://fonts.googleapis.com/css2?family=Pacifico&amp;family=Quicksand&amp;display=swap" rel="stylesheet" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="main.js"></script>
</head>

<body>
    <form method="POST">
        <h1 class="title text-center mb-4">Talk to Us</h1>
        <div class="form-group position-relative">
            <label for="formEmail" class="d-block">
                <i class="icon" data-feather="mail"></i>
            </label>
            <input type="number" id="formEmail" class="form-control form-control-lg thick" name="channel_id" placeholder="Channel ID" required>
        </div>
        <div class="form-group message">
            <textarea id="formMessage" class="form-control form-control-lg" rows="7" name="message" placeholder="Your Message" required></textarea>
        </div>
        <input type="hidden" value="1" id="total_chq" name="total_buttons">
        <div id="select-box" class="text-center" style="justify-content: center"></div>
        <div id="inline-buttons" style="display: flex; flex-direction: row; justify-content: center;width:100%;flex-wrap:wrap"></div>
        <div class="text-center">
            <button type="button" onclick="newAddInline()" class="btn-spacing">Add</button>
            <button type="button" onclick="newRemoveInline()" class="btn-spacing col-sm-4">Remove</button>
        </div><br>
        <div class="text-center">
            <button type="submit" class="btn btn-primary" tabIndex="-1">Send message</button>
        </div>
    </form>

    <script src="https://unpkg.com/feather-icons"></script>
    <script src="https://www.toptal.com/developers/hastebin/raw/oleciriyiv.js"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <script src="https://kit.fontawesome.com/577845f6a5.js" crossorigin="anonymous"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>

【讨论】：

我建议的解决方案对您有用吗？