ホームページ > ウェブフロントエンド > jsチュートリアル > javascript_javascript スキルを使用して div を編集可能にする一般的な方法

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

WBOY
リリース: 2016-05-16 19:08:13
オリジナル
1032 人が閲覧しました

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


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

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

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

アイデア:
1 . ユーザーのマウスが編集可能領域の上を通過すると、背景色やその他の方法を使用して、その領域が編集可能であることをユーザーに思い出させます。
2. ユーザーがマウスで領域をクリックすると、つまり onclick イベント中に、元のコンテンツが最初にクリアされ、入力ボックスと入力ボタンが一時的に作成されます。
3. ユーザーが変更を完了したら、[保存] ボタンをクリックして、ajax を通じて新しいデータをデータベースに書き込みます。 PS: 2 番目のメソッドのコードにはまだいくつかの問題があります。時間があるときにデバッグしてください。
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のおすすめ
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート