Question

我试图修改以下代码，以便它可以保存多个已编辑的文本，而此刻此代码只保存一个（第一个）编辑的文本...任何人都可以修改此代码，例如：你修改它保存3或4个编辑的文本，并根据我可以添加任何数量的文本字段，我需要。如果你在文本fild写入，保存它然后刷新页面你的书面内容将仍然存在，就像你尝试使用下面的代码与一个文本字段，我希望这个featear也适用于添加多个文本字段。

<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>

Answer 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>

多个编辑文本字段

1 个答案: