🎾 👩🏼‍🎓 🧔🏼 HTML5で編集可能なコンテンツ 👩‍⚖️ 🍊 🙍🏼

HTML5の革新の1つは、ブラウザーでページの一部を直接編集できることです。この機能はコンテンツ編集可能と呼ばれます。最新のすべてのブラウザーで動作します。ページの一部を編集可能にするには、タグに属性contenteditable="true"

を設定する必要があります。タグの下には、書式設定、テキスト、リスト、さらにはフラッシュクリップを含むテキストのほとんどすべてを含めることができます。ただし、ユーザーはテキストのみを追加でき、それ以外は削除のみが可能です。この投稿では、Webサイトで編集可能なコンテンツを使用する例を示します。

HTMLコード

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

buttonClick()

関数では、「保存」（「編集」）ボタンが処理されますcontentEditable

属性contentEditable

れ、ボタンのラベルとリストの内容がテキストフィールドにコピーされます。

  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> (  )

編集可能なdiv

。 contenteditable="true"

注意しcontenteditable="true"

。

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

「保存」ボタン（「編集」）。 buttonClick()

関数がbuttonClick()

ます。

  <input type="button" id="myButton" onclick="buttonClick();" value=""> <br><br>

「保存」ボタンを押すとリストの内容が表示されるテキストフィールド。

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

こちらのライブ例をご覧ください。

こちらのコードを含むアーカイブをダウンロードしてください。

PS contenteditable

を使用しcontenteditable

、ブラウザからサイトを完全に編集可能にする方法をすぐに書きます。

HTML5で編集可能なコンテンツ

HTMLコード

More articles: