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

问题描述：

我的目标是使多个div元素的内容可以使用所有相同的div类名称或不同的类名称进行编辑。我意识到contenteditable属性，但我的问题是能够使用java脚本保存它，以便在页面重新加载时保存并显示编辑的内容。我一直在努力遵循本网站上的教程...如何使多个div类元素的内容可编辑

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="[email protected]">[email protected]</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; 
}

任何帮助将不胜感激。提前致谢！

也许你有一个很好的理由，但也许你应该看看jQuery的 - 如果你正在做大量的的DOM操作，它会为您节省很多时间。通过类名获取元素列表只是'$（'。editable'）'... – 2014-11-23 08:16:18

同意jQuery，但所有关于localstorage的学习都适用于这两种情况 – 2014-11-23 08:44:12

@Meshech我删除了我的答案，因为我不'不要以为它会帮助你 - 我建议你通过w3schools的HTML，Javascript和CSS（http://www.w3schools.com）的学习教程部分工作 - 人们会因为w3school有时会给出错误的信息而遭受打击，但这些教程是很好的 - 使用MDN作为绝对参考（https://developer.mozilla.org） – 2014-11-23 09:23:10

答

试试这个。你的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是否应该有不同的id名称和不同的类名？ – Meshech 2014-11-23 08:32:02

同一班，不同身份证 – 2014-11-23 08:32:38

不要忘记标记你接受的答案 – 2014-11-23 11:29:05

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

相关推荐