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 、ブラウザからサイトを完全に編集可能にする方法をすぐに書きます。