여러 div 클래스 요소의 내용을 편집 가능하게 만드는 방법

내 divine 요소의 내용을 모든 div 클래스 이름 또는 다른 클래스 이름으로 편집 가능하게 만드는 것이 목표입니다. contenteditable 속성을 알고 있지만 내 문제는 페이지가 다시로드 될 때 편집 된 내용이 저장되고 표시되도록 Java 스크립트를 사용하여 저장할 수 있다는 것입니다. 나는 상단에있는 파일을 포함 ... 본 웹 사이트의 튜토리얼을 따라 난 mailscript.js라는 다른 파일에 자바 스크립트 코드를 분리 한 지금까지여러 div 클래스 요소의 내용을 편집 가능하게 만드는 방법

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

을 시도하고있다 사용하여 HTML5 파일 ... 나는 또한이 만든 자바 스크립트 파일에 document.getElementsByClassName ...에 ... document.getElementById를 을 변경했습니다. 나는 여기서 어디로 가야할 지 정말로 모른다. 요약하면 편집 내용을 저장하지 못합니다. 그녀는

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

과 자바 스크립트 파일

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

를 볼 필요가 - 당신은 많은 일을하는 경우 DOM 조작으로 인해 많은 시간을 절약 할 수 있습니다. ... –

jQuery에 동의하지만, localstorage에 관한 모든 학습은 두 경우 모두 적용됩니다. –

@Meshech @Meshech 나는 내 대답을 삭제했습니다. 왜냐하면 나는 ' 그것은 당신을 도울 것이라고 생각합니다 - 나는 당신이 HTML, 자바 스크립트, CSS (http://www.w3schools.com)에 대한 w3schools의 튜토리얼 섹션을 학습하도록 권합니다. - 사람들은 w3school가 때때로 잘못된 정보를 줄 수 있기 때문에 그것을 비난 할 것입니다. 자습서가 좋습니다 - 절대 참조 (https://developer.mozilla.org)에 MDN을 사용하십시오 –

시도해보십시오. 귀하의 div의 당신이 좋은 이유가 있지만, 아마도 당신이 jQuery를 보라 <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>

자바 스크립트 아마

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

동일한 클래스, 다른 ID –

허용되는 답변을 표시하는 것을 잊지 마세요. –

여러 div 클래스 요소의 내용을 편집 가능하게 만드는 방법

답변

관련 문제