用javascript實現div可編輯的常見方法
更新時間：2007年10月25日 11:24:05 作者：
功能：實現網頁內容的即時編輯，增加頁面的可用性、交互性。
方法1：直接通過textarea標簽實現，請運行下邊代碼：
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
思路：將textarea通過CSS樣式設計成讓用戶感覺不像是textarea的樣子，通過onblur、oumouseout等屬性進行ajax保存用戶數據。
方法二：通過document.createElement的方法向頁面增加input來實現。請運行下邊代碼：
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
思路：
1、當用戶鼠標經過可編輯區(qū)域時，用背景色等方式提醒用戶該區(qū)域可編輯。
2、當用戶鼠標點擊該區(qū)域時，也就是onclick事件時，先將原來的內容清掉，將臨時創(chuàng)建出來一個輸入框和一個輸入按扭。
3、用戶修改完后，點擊“保存”按扭時通過ajax向數據庫中寫入新的數據。
PS：第二個方法的代碼還有點問題，有空再來調試一下。
方法1：直接通過textarea標簽實現，請運行下邊代碼：
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
思路：將textarea通過CSS樣式設計成讓用戶感覺不像是textarea的樣子，通過onblur、oumouseout等屬性進行ajax保存用戶數據。
方法二：通過document.createElement的方法向頁面增加input來實現。請運行下邊代碼：
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
思路：
1、當用戶鼠標經過可編輯區(qū)域時，用背景色等方式提醒用戶該區(qū)域可編輯。
2、當用戶鼠標點擊該區(qū)域時，也就是onclick事件時，先將原來的內容清掉，將臨時創(chuàng)建出來一個輸入框和一個輸入按扭。
3、用戶修改完后，點擊“保存”按扭時通過ajax向數據庫中寫入新的數據。
PS：第二個方法的代碼還有點問題，有空再來調試一下。
相關文章
使用three.js可以方便的讓我們在網頁中做出各種不同的3D效果，下面這篇文章主要給大家介紹了關于利用Three.js如何實現陰影效果的相關資料，文中通過示例代碼介紹的非常詳細，需要的朋友可以參考借鑒，下面來一起看看吧。2017-09-09
這篇文章主要介紹了js實現for循環(huán)跳過undefined值,結合實例形式分析了js使用for循環(huán)針對數組的遍歷、判斷、運算等相關操作技巧,需要的朋友可以參考下2019-07-07
徹底搞懂JavaScript中的apply和call方法(必看)
下面小編就為大家?guī)硪黄獜氐赘愣甁avaScript中的apply和call方法(必看)。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
本篇文章主要是對js 事件截取enter按鍵頁面提交事件示例代碼進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-03-03
微信小程序的開發(fā)過程中,有時前端需要獲取到openId來使用,下面這篇文章主要給大家介紹了關于微信小程序獲取用戶openid的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-01-01
最近在學習bootstrap3.3.5，遇到一個問題搞不清楚<li role="presentation">到底什么含義？今天小編通過本文給大家詳細介紹下，一起看看吧2016-12-12
javascript游戲開發(fā)之《三國志曹操傳》零部件開發(fā)(四)用地圖塊拼成大地圖
小時候我們玩過拼圖游戲，是用自己的手去拼的。今天我們來研究研究用javascript來拼圖感興趣的朋友可以了解下,希望本文對你有所幫助2013-01-01
這篇文章介紹了javascript 上下banner替換具體實現，有需要的朋友可以參考一下2013-11-11
這篇文章主要給大家簡單介紹了JavaScript中運算符的優(yōu)先級的相關問題，十分的實用，有需要的小伙伴可以參考下。2015-07-07
這篇文章主要為大家詳細介紹了mock.js模擬前后臺交互的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-07-07