0

次のコードを変更して、複数の編集済みテキストを保存できるようにしようとしていますが、現時点では、このコードは1つの（最初の）編集済みテキストのみを保存しています...誰かがこのコードを変更してください。たとえば、3を保存するように変更します。または4つの編集されたテキスト。それに基づいて、必要な数のテキストフィールドを追加できます。また、テキストfildを書き込んで保存し、ページを更新すると、1つのテキストフィールドで次のコードを試してみるのと同じように、書き込まれたコンテンツがそのまま表示されることに注意してください。この機能は、複数のテキストを追加するときにも適用されます。田畑。

<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 に答える