javascript_javascript スキルを使用して div を編集可能にする一般的な方法

機能: Web コンテンツのリアルタイム編集により、ページの使いやすさと対話性が向上します。
方法 1: textarea タグを介して直接、次のコードを実行してください:

<title> 新しいドキュメント </title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <style type="text/css"> #info { font-size: 12px; overflow:hidden; background-color: #ffffcc; color: black; padding-right:5px; padding-left:5px; font-family: courier; width:100%; letter-spacing:0; line-height:12px; border-style:none; } </style> <div id="sdf" style="width:400px;"> <textarea id="info" onblur="saveInfo()" onmouseout="saveInfo()" onkeyup="setRows()">

[Ctrl A すべて選択 注: 外部 Js を導入する必要がある場合は、更新して実行する必要があります

]

アイデア: textarea を CSS で渡す ユーザーが textarea であることを感じさせないスタイルに設計されており、ユーザーデータは onblur、oumouseout などの属性を通じて ajax 経由で保存されます。
方法 2: document.createElement メソッドを通じて入力をページに追加します。次のコードを実行してください:

<title> </title> 新しいドキュメント <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <div id="gtest"> </div> 編集するにはここをクリックしてください
[Ctrl A すべて選択 注:

外部 Js を導入する必要がある場合は、更新して実行する必要があります
]

アイデア:
1 . ユーザーのマウスが編集可能領域の上を通過すると、背景色やその他の方法を使用して、その領域が編集可能であることをユーザーに思い出させます。
2. ユーザーがマウスで領域をクリックすると、つまり onclick イベント中に、元のコンテンツが最初にクリアされ、入力ボックスと入力ボタンが一時的に作成されます。
3. ユーザーが変更を完了したら、[保存] ボタンをクリックして、ajax を通じて新しいデータをデータベースに書き込みます。 PS: 2 番目のメソッドのコードにはまだいくつかの問題があります。時間があるときにデバッグしてください。