通过单击按钮将 textarea 内容更改回其起始形式

Question

我有一个<p id="tag">，用户可以通过单击按钮对其进行编辑。

编辑按钮的点击功能：

function p_edit() {
        var content= $("#tag").text();
        "now var content is equal to tag's content"
        $("#tag-form2").css("display", "block")
        $("#tag").css("display", "none")
        $(".user-holder4").css("display", "none")
        $("#id_tag").text(content)
        "above the content obtained from the tag is appended to the textarea"
        $(".kokomo-holder2").css("display","block")
        $(".login-button4").css("display","block")
        $(".login-button6").css("display","block")
    }
    "as you can see, the button gets the tag's content and appends it to the textarea of which the id is 'id_tag'"

单击编辑按钮后，用户可以更改文本或按取消按钮。

取消按钮onclick功能：

function cancel(){
        $(".bilgilendirme-holder2").css("display","none")
        $(".login-button4").css("display","none")
        $(".login-button5").css("display","none")
        $(".login-button6").css("display","none")
        $("#tag-form2").css("display","none")
        $("#tag").css("display","block")
        $(".user-holder4").css("display","block")
        $("#id_tag").text(content)
    }
"this function reverses what was done by the edit function so the <p> tag becomes visible again"

当编辑完成后重新点击编辑按钮时，它可以完美运行。

当用户按下编辑按钮，在文本区域中进行更改然后按下取消时，会出现此问题。 在这种情况下，当重新单击编辑按钮时，textarea 的内容仍然是用户编辑的方式，但它应该与 <p> 标记的内容相同。

这可能是因为浏览器缓存了 textarea 内容，只要附加的内容与浏览器缓存的初始内容相同，textarea 的文本就会保持用户更改的方式。

我为 textarea 分配了 'autocomplete="off"' 属性，但它不起作用。

我想知道是否有办法摆脱这个问题，而无需在每次单击编辑按钮时删除并重新创建文本区域。

Answer 1

我认为您的取消按钮逻辑应该如下所示。

$(document).ready(function(){
$("#Edit").on('click',EditOrSave);
$("#cancel").on('click',Cancel);


})

function EditOrSave(){
  var btn=$("#Edit");
  if(btn.val()=="Edit")
  {
    window.textContentofP=$("#tag").text();
    $("#editcontent2").show();
    $("#editcontent2").val(window.textContentofP);
    $("#tag").hide();
    $("#cancel").show();
    btn.val("Save");
  }
  else{
    $("#tag").text($("#editcontent2").val());
     $("#editcontent2").hide();
    $("#tag").show();
     $("#cancel").hide();
    btn.val("Edit");
  }
}
function Cancel(){
   $("#tag").text(window.textContentofP);
   $("#editcontent2").hide();
   $("#tag").show();
    $("#cancel").hide();
    $("#Edit").val("Edit");
    $("#cancel").hide()
   
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p id="tag">Hello How are you</p>
<textarea id="editcontent2" style="display:none;"></textarea>
<input type="button" id="Edit" value="Edit"/>
<input type="button" id="cancel" style="display:none;" value="Cancel" />

Answer 2

在您的 p_edit() 方法中，您有这一行，您说将文本分配给 textarea：

$("#id_tag").text(content)

但是，在您的 cancel() 方法中，您有这行：

$("#id_etiket2").text("")

取而代之的是（或者可能是因为我不知道 #id_etiket2 引用了什么），尝试将 $("#id_tag").text(""); 添加到您的 cancel() 方法中。