用javascript實現(xiàn)div可編輯的常見方法

更新時間：2007年10月25日 11:24:05 作者：

功能：實現(xiàn)網(wǎng)頁內(nèi)容的即時編輯，增加頁面的可用性、交互性。
方法1：直接通過textarea標簽實現(xiàn)，請運行下邊代碼：

思路：將textarea通過CSS樣式設計成讓用戶感覺不像是textarea的樣子，通過onblur、oumouseout等屬性進行ajax保存用戶數(shù)據(jù)。
方法二：通過document.createElement的方法向頁面增加input來實現(xiàn)。請運行下邊代碼：

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

思路：
1、當用戶鼠標經(jīng)過可編輯區(qū)域時，用背景色等方式提醒用戶該區(qū)域可編輯。
2、當用戶鼠標點擊該區(qū)域時，也就是onclick事件時，先將原來的內(nèi)容清掉，將臨時創(chuàng)建出來一個輸入框和一個輸入按扭。
3、用戶修改完后，點擊“保存”按扭時通過ajax向數(shù)據(jù)庫中寫入新的數(shù)據(jù)。

PS：第二個方法的代碼還有點問題，有空再來調(diào)試一下。

您可能感興趣的文章:

用javascript實現(xiàn)div可編輯的常見方法

利用Three.js如何實現(xiàn)陰影效果實例代碼
使用three.js可以方便的讓我們在網(wǎng)頁中做出各種不同的3D效果，下面這篇文章主要給大家介紹了關于利用Three.js如何實現(xiàn)陰影效果的相關資料，文中通過示例代碼介紹的非常詳細，需要的朋友可以參考借鑒，下面來一起看看吧。
2017-09-09
js實現(xiàn)for循環(huán)跳過undefined值示例
這篇文章主要介紹了js實現(xiàn)for循環(huán)跳過undefined值,結(jié)合實例形式分析了js使用for循環(huán)針對數(shù)組的遍歷、判斷、運算等相關操作技巧,需要的朋友可以參考下
2019-07-07
徹底搞懂JavaScript中的apply和call方法(必看)
下面小編就為大家?guī)硪黄獜氐赘愣甁avaScript中的apply和call方法(必看)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-09-09
js 事件截取enter按鍵頁面提交事件示例代碼
本篇文章主要是對js 事件截取enter按鍵頁面提交事件示例代碼進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助
2014-03-03
微信小程序獲取用戶openid的圖文教程(含源碼)
微信小程序的開發(fā)過程中,有時前端需要獲取到openId來使用,下面這篇文章主要給大家介紹了關于微信小程序獲取用戶openid的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
2023-01-01
BootStrap中<li role=
最近在學習bootstrap3.3.5，遇到一個問題搞不清楚<li role="presentation">到底什么含義？今天小編通過本文給大家詳細介紹下，一起看看吧
2016-12-12
javascript游戲開發(fā)之《三國志曹操傳》零部件開發(fā)(四)用地圖塊拼成大地圖
小時候我們玩過拼圖游戲，是用自己的手去拼的。今天我們來研究研究用javascript來拼圖感興趣的朋友可以了解下,希望本文對你有所幫助
2013-01-01
javascript 上下banner替換具體實現(xiàn)
這篇文章介紹了javascript 上下banner替換具體實現(xiàn)，有需要的朋友可以參考一下
2013-11-11
淺談JavaScript中運算符的優(yōu)先級
這篇文章主要給大家簡單介紹了JavaScript中運算符的優(yōu)先級的相關問題，十分的實用，有需要的小伙伴可以參考下。
2015-07-07
mock.js模擬前后臺交互
這篇文章主要為大家詳細介紹了mock.js模擬前后臺交互的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-07-07