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

提问者：小点点

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

我有一个，用户可以通过单击按钮对其进行编辑。

编辑按钮onclick功能:

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"

当编辑完成，然后重新点击编辑按钮时，它可以完美地工作。

当用户按下“编辑”按钮，在文本区域中进行更改，然后按下“取消”时，会出现此问题。在这种情况下，当重新单击edit按钮时，textarea的内容将保持用户编辑它的方式，而它应该与

标记的内容相同。

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

我给textarea分配了'autocomplete=“off”‘属性，但它没有工作。

我想知道是否有一种方法可以解决这个问题，而不必在每次单击编辑按钮时删除并重新创建文本区域。

共2个答案

匿名用户

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

null

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


})

function EditOrSave(){
  var btn=$("#Edit");
  if(btn.val()=="Edit")
  {
    window.textContentofP=$("#tag").text();
    $("#editcontent").show();
    $("#editcontent").val(window.textContentofP);
    $("#tag").hide();
    $("#cancel").show();
    btn.val("Save");
  }
  else{
    $("#tag").text($("#editcontent").val());
     $("#editcontent").hide();
    $("#tag").show();
     $("#cancel").hide();
    btn.val("Edit");
  }
}
function Cancel(){
   $("#tag").text(window.textContentofP);
   $("#editcontent").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>
<input type="text" id="editcontent" style="display:none;"/>
<input type="button" id="Edit" value="Edit"/>
<input type="button" id="cancel" style="display:none;" value="Cancel" />

匿名用户

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

$（“#id_tag”）.text（内容）

但是，在cancel()方法中，有一行:

$（“#id_etiket2”）.text（“”）

与其这样做（或者因为我不知道#id_etiket2引用了什么，还可以这样做），不如尝试将$（“#id_tag”）.text（“”）；添加到cancel()方法中。