サイト訪問者がWebページのコンテンツを編集可能にする

ユーザーが編集できるウェブサイト上のテキストを、予想以上に簡単にすることができます。 HTMLはこの目的のための属性を提供します： contenteditable.

ザ contenteditable 属性はHTML5のリリースで2014年に初めて導入されました。それは、それが支配するコンテンツを、サイト訪問者がブラウザ内から変更できるかどうかを指定します。

Contenteditable属性のサポート

最新のデスクトップブラウザのほとんどは、この属性をサポートしています。これらには、

• Chrome 4.0以降
• Internet Explorer 6以降
• Firefox 3.5以降
• Safari 3.1以上
• Opera 10.1以上
• マイクロソフトエッジ

同じことがほとんどのモバイルブラウザにも当てはまります。

Contenteditableの使い方

編集可能にしたいHTML要素に属性を追加するだけです。これには3つの値があります。真実, 偽 そして 継承する. 継承する 要素がその親の値をとることを意味するデフォルト値です。同様に、新しく編集可能なコンテンツの子要素も、値を変更しない限り編集可能です 偽。たとえば、 DIV 要素編集可能、使用：

Contenteditableで編集可能なTo-Doリストを作成する

編集可能なコンテンツは、ローカルストレージとペアにすると最も効果的です。そのため、セッションとサイト訪問の間にコンテンツが存続します。

1. HTMLエディタでページを開きます。
2. 名前付きの箇条書きリストを作成する myTasks:
   2. いくつかのタスク
   4. 別のタスク
5. 追加するcontenteditable 属性を
   素子：
   編集可能なToDoリストが作成されましたが、ブラウザを閉じるかページを離れるとリストは消えます。解決策：タスクをlocalStorageに保存するための簡単なスクリプトを追加します。
8. jQueryへのリンクを あなたの文書の この例ではGoogleのCDNを使用していますが、自分でホストすることも、必要に応じて別のCDNを使用することもできます。
11. あなたのページの一番下、 タグを追加して、スクリプトを追加してください： これがjQueryの始まりです document.ready ドキュメントが完全に読み込まれた後にこのスクリプトを読み込むようブラウザに指示します。

内部 document.ready 関数を使用して、スクリプトを追加してタスクをlocalStorageにロードし、以前にそこに保存されたタスクを取得します。 $（document.ready（function（）{

1. $（ "＃myTasks"）。blur（function（）{//カーソルが#myTasks要素を離れるとき
4. localStorage.setItem（ 'myTasksData'、this.innerHTML）; // localStorageに保存する
7. });
10. if（localStorage.getItem（ 'myTasksData'））{//コンテンツがlocalStorageにある場合
13. $（ "＃myTasks"）。html（localStorage.getItem（ 'myTasksData'））; //ページにコンテンツを入れる
16. }
17. });

ページ全体のHTMLは次のようになります。

私の仕事

あなたのリストの項目を入力してください。ブラウザはあなたのためにそれを保存するので、ブラウザを再度開くと、それはまだここにあります。

• いくつかのタスク
• 別のタスク