时间戳

首页 > 解决方案 > 通过单击按钮将 textarea 内容更改回其起始形式

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

问题描述

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

编辑按钮 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"

当编辑完成并且之后重新单击编辑按钮时，它可以完美地工作。

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

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

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

我想知道是否有一种方法可以摆脱这个问题，而无需在每次单击编辑按钮时删除和重新创建 textarea。

标签： javascripthtmljquerycssbrowser

解决方案

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

$(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" />

推荐阅读