Geekly Articles each Day
📜 ⬆️ ⬇️

Content editable in HTML5

HTML5
One of the innovations of HTML5 was the ability to edit part of the page directly in the browser. This feature is called content editable . It works in all modern browsers. To make part of the page editable, you need to set the tag attribute contenteditable="true" . Under the tag can be almost everything: text with formatting, pictures, lists, and even flash-videos. But the user can only add text, he can only delete the rest. In this post I will show an example of using content editable on a website.

HTML code


 <!DOCTYPE HTML> <html> <head> <title>   HTML5</title> <script type="text/javascript">

The buttonClick() function handles a click on the Save button (Edit): the contentEditable attribute contentEditable , the inscription on the button and the contents of the list are copied into the text field.

  function buttonClick () { var div = document.getElementById ("myDiv"); var button = document.getElementById ("myButton"); var content_div = document.getElementById ("ListContent"); var textarea = document.getElementById ("myTextarea"); if (div.contentEditable == "true") { div.contentEditable = "false"; content_div.style.display = "inline"; textarea.innerHTML = div.innerHTML; button.value = ""; } else { div.contentEditable = "true"; content_div.style.display = "none"; button.value = ""; } } </script> </head> <body> <b>  ?</b> (  )

Editable div . Pay attention to contenteditable="true" .

  <div id="myDiv" contenteditable="true"> <ul id="todolist"> <li> </li> <li> </li> <li> </li> <li> !</li> </ul> </div>

Button "Save" ("Edit"). By pressing, the buttonClick() function is buttonClick() .
') 
  <input type="button" id="myButton" onclick="buttonClick();" value=""> <br><br>

A text box in which the contents of the list is displayed by clicking the "Save" button.

  <div id="ListContent" style="display: none;">   :<br> <textarea rows="10" cols="70" id="myTextarea"> </textarea> </div> </body> </html>


See a live example here .

Download the archive with the code here .

PS I will write soon how to make a site completely editable from the browser using contenteditable .

Source: https://habr.com/ru/post/126877/

More articles:


All Articles