如何使多個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; 
}

任何幫助將不勝感激。提前致謝！

來源

2014-11-23 Meshech

也許你有一個很好的理由，但也許你應該看看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); 
      }); 
     } 
}

來源

2014-11-23 07:45:53

div是否應該有不同的id名稱和不同的類名？ – Meshech 2014-11-23 08:32:02

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

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

如何使多個div類元素的內容可編輯

回答

相關問題