0

我正在尝试修改以下代码，以便它可以保存多个已编辑的文本，而目前此代码仅保存一个（第一个）已编辑的文本...有人可以为我修改此代码，例如：您修改它以保存 3或 4 个编辑过的文本，基于此我可以添加我需要的任意数量的文本字段。如果您在文本字段中写入，保存它然后刷新页面，您的书面内容仍然存在，就像您尝试使用以下代码和一个文本字段一样，我希望在添加多个文本时也应用此功能字段。

<html>
<head>
<title>Allowing Users to Edit Multiple Text field and save the contents</title>
<script type="text/javascript">
function saveEdits() {

//get the editable element
var editElem = document.getElementById("edit");

//get the edited element content
var userVersion = editElem.innerHTML;

//save the content to local storage
localStorage.userEdits = userVersion;

//write a confirmation to the user
document.getElementById("update").innerHTML="Edits saved!";

}
function checkEdits() {

//find out if the user has previously saved edits
if(localStorage.userEdits!=null)
    document.getElementById("edit").innerHTML=localStorage.userEdits;
}
</script>
</head>
<body onload="checkEdits()">

<div id="edit" contenteditable="true">
Here is the element's original content
</div>

<input type="button" value="save my edits" onclick="saveEdits()"/>

<div id="update"> Edit the text and click to save for next time</div>

</body>
</html>

提前致谢。

这就是我尝试过的。

<html>
<head>
<title>Allowing Users to Edit Multiple Text field and save the contents</title>
<script type="text/javascript">
function saveEdits() {

//get the editable element
var editElem = document.getElementById("edit");

//get the edited element content
var userVersion = editElem.innerHTML;

//save the content to local storage
localStorage.userEdits = userVersion;

// for new text field
localStorage.userEdit1 = userVersion;
//write a confirmation to the user
document.getElementById("update").innerHTML="Edits saved!";

}
function checkEdits() {

//find out if the user has previously saved edits
if(localStorage.userEdits!=null)
    document.getElementById("edit").innerHTML=localStorage.userEdits;
}
</script>
</head>
<body onload="checkEdits()">

<div id="edit" contenteditable="true">
Here is the element's original content
</div>

    <!--New text field -->
    <div id="edit" contenteditable="true">
This is another text field.
</div>

<input type="button" value="save my edits" onclick="saveEdits()"/>

<div id="update"> Edit the text and click to save for next time</div>

</body>
</html>
4

1 回答 1

1

脏复制粘贴作业。至少它演示了如何添加更多可编辑的 div。

为了使其动态化，您可以考虑以不同的方式构造函数，或者开始在其中添加 jQuery 以使元素选择更容易。.

<html>
<head>
<title>Allowing Users to Edit Multiple Text field and save the contents</title>
<script type="text/javascript">
function saveEdits() {

//get the editable element
var editElem1 = document.getElementById("edit1");
var editElem2 = document.getElementById("edit2");
var editElem3 = document.getElementById("edit3");
var editElem4 = document.getElementById("edit4");

//get the edited element content
var userVersion1 = editElem1.innerHTML;
var userVersion2 = editElem2.innerHTML;
var userVersion3 = editElem3.innerHTML;
var userVersion4 = editElem4.innerHTML;

//save the content to local storage
localStorage.userEdits1 = userVersion1;
localStorage.userEdits2 = userVersion2;
localStorage.userEdits3 = userVersion3;
localStorage.userEdits4 = userVersion4;

//write a confirmation to the user
document.getElementById("update").innerHTML="Edits saved!";

}
function checkEdits() {

//find out if the user has previously saved edits
if(localStorage.userEdits1!=null)
    document.getElementById("edit1").innerHTML=localStorage.userEdits1;

if(localStorage.userEdits2!=null)
    document.getElementById("edit2").innerHTML=localStorage.userEdits2;

if(localStorage.userEdits3!=null)
    document.getElementById("edit3").innerHTML=localStorage.userEdits3;


if(localStorage.userEdits4!=null)
    document.getElementById("edit4").innerHTML=localStorage.userEdits4;
}

</script>
</head>
<body onload="checkEdits()">

<div id="edit1" contenteditable="true">
Here is the element's original content
</div>
<div id="edit2" contenteditable="true">
Here is the element's original content
</div>
<div id="edit3" contenteditable="true">
Here is the element's original content
</div>
<div id="edit4" contenteditable="true">
Here is the element's original content
</div>
<input type="button" value="save my edits" onclick="saveEdits()"/>

<div id="update"> Edit the text and click to save for next time</div>

</body>
</html>
于 2012-10-18T19:39:21.960 回答