Jump to content

contentEditable


djp1988

Recommended Posts

Hi, I've got the JavaScript bible and i have just read about the contentEditable code but I wondered what the point of edditing part of the html in a page would be because the given value of the edit is not saved into the page, it is destroyed once you leave the page, so what would this code be useful for?PS: this does not work in Firefox

<html>   <head>	  <style type="text/css">	  .normal {color: black}	  .editing {color: red}	  </style>	  <script type="text/javascript">	  function toggleEdit() {		 var newState = !editableText.isContentEditable;		 editableText.contentEditable = newState;		 editableText.className = (newState) ? "editing" : "normal";		 editBtn.innerText = (newState) ? "Disable Editing" : "Enable Editing";	  }	  </script>	  <title>	  </title>   </head>   <body>	  <h1>Poetry Editor</h1>	  <hr />	  <p>Turn on editing to modify the following text:</p>	  <div id="noneditableText">		 Roses are red,<br />		 Violets are blue.	  </div>	  <div id="editableText">		 Line 3,<br />		 Line 4.	  </div>	  <p><button id="editBtn" onclick="toggleEdit()"		 onfocus="this.blur()">Enable Editing</button></p>   </body></html>

Link to comment
Share on other sites

Well, it makes the page prettier because of the lack of a form field. It's great for creating WYSIWYG editors. Then, you'll need a submit button that would actually take the new content and submit that.But I wouldn't use this, because it only works in IE.... And I suppose if you care for users with JS off, it would take a bit more skill to first create a textarea in HTML, and only then, but using this JS property, to replace them with a nice pure text.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...