Question

我的目标是使多个div元素的内容可以使用所有相同的div类名称或使用不同的类名来编辑。我知道contenteditable属性，但我的问题是能够使用java脚本保存它，以便在页面重新加载时，编辑的内容被保存和显示。我一直在尝试按照本网站上的教程...

http://www.developerdrive.com/2012/06/allowing-users-to-edit-text-content-with-html5/

到目前为止，我已将java脚本代码分成另一个名为mailscript.js的文件我使用...将文件包含在html5文件顶部附近我也改变了...... 的document.getElementById 至... document.getElementsByClassName 在一个Java脚本文件中。我真的不知道从哪里开始。简而言之，编辑无法保存。她是档案......

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"> 
<title>Package Information</title>
<script type="text/javascript" src="mailscript.js"></script>
<link rel="stylesheet" href="mailstyle.css">
<link rel="icon"
      type="image/ico"
      href="favicon.ico">
</head>
<body onload="checkEdits()">
<div id="wrapper">
    <div id="header">
      <header><h1>Bison Mail</h1></header>
        </div>
    <hr>
    <br id="clearleft">

    <div id="leftcolumn">
    <hr>
            <ul class="navbar">
                        <li><a href="staffhome.html">Home</a></li>
            <li><a href="staffinfo.html">Packages</a></li>
            <li><a href="contactus.html">Contact Us</a></li>
            <li><a href="mailhome.html">Sign-Out</a></li>
            </ul>
    <hr>
    </div>

        <div id="rightcolumn">
            <div class="container">
                <div class="table-row">
                    <div class="heading">Name:</div>
                    <div class="name" contenteditable="true">Meshech Price</div>
                </div>
                <div class="table-row">
                    <div class="heading">Date Received:</div>
                    <div class="dateRecieved" contenteditable="true">11/1/2014</div>
                </div>
                <div class="table-row">
                    <div class="heading">Date of Pickup:</div>
                    <div class="dateOfPickup" contenteditable="true">None</div>
                </div>
                <div class="table-row">
                    <div class="heading">ID:</div>
                    <div class="ID" contenteditable="true">N/A</div>
                </div>
                <div class="table-row">
                    <div class="heading">E-mail:</div>
                    <div class="email" contenteditable="true"><address><a href="shackster3773@yahoo.com">shackster3773@yahoo.com</a></address></div>
                </div>
                <div class="table-row">
                    <div class="heading">E-mail Sent:</div>
                    <div class="emailSent" contenteditable="true">Sent</div>
                </div>
                <div class="table-row">
                    <div class="heading">Signature:</div>
                    <div class="signature" contenteditable="true">N/A</div>
                </div>
            </div>
            <hr>
        <input type="button" value="save my edits" onclick="saveEdits()"/>
        <input type="button" value="add package" onclick="addElement()"/>
        <br>
    <hr>
            <div id="footer">
        <br>
        <p>By: Meshech &copy;</p>
            </div>
        </div>



</div>    



</body>
</html>

和java脚本文件

function saveEdits() {

//get the editable element
var editElem = document.getElementsByClassName("name");
//display.write(editElem);
//get the edited element content
var userVersion = editElem.innerHTML;
//display.write(userVersion);
//save the content to local storage
localStorage.userEdits = userVersion;

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

}

function checkEdits() {

//find out if the user has previously saved edits
if(localStorage.userEdits!==null)
document.getElementsByClassName("name").innerHTML = localStorage.userEdits;
}

任何帮助都会非常感激。提前谢谢！

Answer 1

试试这个。你的div需要看起来像<div id="name" class="edit" contenteditable="true">Meshech Price</div>

<强> HTML

<div class="container">
        <div class="table-row">
            <div class="heading">Name:</div>
            <div id="name" class="edit" contenteditable="true">Meshech Price</div>
        </div>
        <div class="table-row">
            <div class="heading">Date Received:</div>
            <div id="dateRecieved" class="edit" contenteditable="true">11/1/2014</div>
        </div>

<强>的Javascript

function saveEdits() {
    var editElem = document.getElementsByClassName("edit");
    localStorage.userEdits = {}
    Array.prototype.forEach.call(editElem, function(e) {
            console.log(e.id)
            localStorage.setItem([e.id], e.innerHTML);
        });

    document.getElementsByClassName("update").innerHTML="Edits saved!";

}

function checkEdits() {

   if(localStorage.userEdits) {
      var editElem = document.getElementsByClassName("edit");
      Array.prototype.forEach.call(editElem, function(e) {
                console.log(e.id)
                e.innerHTML = localStorage.getItem(e.id);
            });
        }
}

如何使多个div类元素的内容可编辑

1 个答案: