用javascript實(shí)現(xiàn)div可編輯的常見(jiàn)方法
更新時(shí)間：2007年10月25日 11:24:05 作者：
功能：實(shí)現(xiàn)網(wǎng)頁(yè)內(nèi)容的即時(shí)編輯，增加頁(yè)面的可用性、交互性。
方法1：直接通過(guò)textarea標(biāo)簽實(shí)現(xiàn)，請(qǐng)運(yùn)行下邊代碼：
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
思路：將textarea通過(guò)CSS樣式設(shè)計(jì)成讓用戶(hù)感覺(jué)不像是textarea的樣子，通過(guò)onblur、oumouseout等屬性進(jìn)行ajax保存用戶(hù)數(shù)據(jù)。
方法二：通過(guò)document.createElement的方法向頁(yè)面增加input來(lái)實(shí)現(xiàn)。請(qǐng)運(yùn)行下邊代碼：
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
思路：
1、當(dāng)用戶(hù)鼠標(biāo)經(jīng)過(guò)可編輯區(qū)域時(shí)，用背景色等方式提醒用戶(hù)該區(qū)域可編輯。
2、當(dāng)用戶(hù)鼠標(biāo)點(diǎn)擊該區(qū)域時(shí)，也就是onclick事件時(shí)，先將原來(lái)的內(nèi)容清掉，將臨時(shí)創(chuàng)建出來(lái)一個(gè)輸入框和一個(gè)輸入按扭。
3、用戶(hù)修改完后，點(diǎn)擊“保存”按扭時(shí)通過(guò)ajax向數(shù)據(jù)庫(kù)中寫(xiě)入新的數(shù)據(jù)。
PS：第二個(gè)方法的代碼還有點(diǎn)問(wèn)題，有空再來(lái)調(diào)試一下。
方法1：直接通過(guò)textarea標(biāo)簽實(shí)現(xiàn)，請(qǐng)運(yùn)行下邊代碼：
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
思路：將textarea通過(guò)CSS樣式設(shè)計(jì)成讓用戶(hù)感覺(jué)不像是textarea的樣子，通過(guò)onblur、oumouseout等屬性進(jìn)行ajax保存用戶(hù)數(shù)據(jù)。
方法二：通過(guò)document.createElement的方法向頁(yè)面增加input來(lái)實(shí)現(xiàn)。請(qǐng)運(yùn)行下邊代碼：
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
思路：
1、當(dāng)用戶(hù)鼠標(biāo)經(jīng)過(guò)可編輯區(qū)域時(shí)，用背景色等方式提醒用戶(hù)該區(qū)域可編輯。
2、當(dāng)用戶(hù)鼠標(biāo)點(diǎn)擊該區(qū)域時(shí)，也就是onclick事件時(shí)，先將原來(lái)的內(nèi)容清掉，將臨時(shí)創(chuàng)建出來(lái)一個(gè)輸入框和一個(gè)輸入按扭。
3、用戶(hù)修改完后，點(diǎn)擊“保存”按扭時(shí)通過(guò)ajax向數(shù)據(jù)庫(kù)中寫(xiě)入新的數(shù)據(jù)。
PS：第二個(gè)方法的代碼還有點(diǎn)問(wèn)題，有空再來(lái)調(diào)試一下。
您可能感興趣的文章:
- JS實(shí)現(xiàn)適合于后臺(tái)使用的動(dòng)畫(huà)折疊菜單效果
- js實(shí)現(xiàn)的后臺(tái)左側(cè)管理菜單代碼
- jsp中將后臺(tái)傳遞過(guò)來(lái)的json格式的list數(shù)據(jù)綁定到下拉菜單select
- 前臺(tái)JS(jquery ajax)調(diào)用后臺(tái)方法實(shí)現(xiàn)無(wú)刷新級(jí)聯(lián)菜單示例
- js類(lèi)后臺(tái)管理菜單類(lèi)-MenuSwitch
- JS在可編輯的div中的光標(biāo)位置插入內(nèi)容的方法
- ExtJS中設(shè)置下拉列表框不可編輯的方法
- 使用js實(shí)現(xiàn)一個(gè)可編輯的select下拉列表
- 讓你的網(wǎng)站可編輯的實(shí)現(xiàn)js代碼
- JS實(shí)現(xiàn)可編輯的后臺(tái)管理菜單功能【附demo源碼下載】
相關(guān)文章
javascript 靜態(tài)對(duì)象和構(gòu)造函數(shù)的使用和公私問(wèn)題
靜態(tài)對(duì)象和構(gòu)造函數(shù)的使用區(qū)別 平常我們會(huì)經(jīng)常使用JSON形式，或者var obj=function(){}亦或function(){}這么幾種對(duì)象的構(gòu)建辦法，有時(shí)會(huì)認(rèn)為這是等價(jià)的辦法，然而他們還有不同。2010-03-03
JS實(shí)現(xiàn)簡(jiǎn)單九宮格抽獎(jiǎng)
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)簡(jiǎn)單九宮格抽獎(jiǎng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-06-06
JSON字符串和JSON對(duì)象相互轉(zhuǎn)化實(shí)例詳解
這篇文章主要介紹了JSON字符串和JSON對(duì)象相互轉(zhuǎn)化方法,結(jié)合實(shí)例形式詳細(xì)分析了json對(duì)象與字符串的功能、使用、轉(zhuǎn)換方法及相關(guān)注意事項(xiàng),需要的朋友可以參考下2017-01-01
Js+XML 操作...2006-09-09
js實(shí)現(xiàn)無(wú)限瀑布流實(shí)例方法
在本篇文章里小編給大家整理的是關(guān)于js實(shí)現(xiàn)無(wú)限瀑布流實(shí)例方法以及相關(guān)代碼，需要的朋友們學(xué)習(xí)下吧。2019-09-09
javascript實(shí)現(xiàn)五星評(píng)價(jià)代碼（源碼下載）
大家在淘寶購(gòu)物之后，都會(huì)對(duì)賣(mài)家的服務(wù)進(jìn)行評(píng)論，那么五星評(píng)價(jià)代碼是怎么實(shí)現(xiàn)的呢？下面小編給大家介紹基于Javascript實(shí)現(xiàn)五星評(píng)價(jià)代碼，有需要的朋友可以參考下2015-08-08
javascript獲取xml節(jié)點(diǎn)的最大值(實(shí)現(xiàn)代碼)
這篇文章主要介紹了利用javascript獲取xml節(jié)點(diǎn)的最大值。需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-12-12
CodeMirror實(shí)現(xiàn)代碼對(duì)比功能(插件react vue)
這篇文章主要介紹了CodeMirror實(shí)現(xiàn)代碼對(duì)比功能,用到的插件有vue或者react都需要這一步且同樣的下載方式，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-05-05
js之彈出式窗口代碼生成器...2007-06-06
微信小程序用戶(hù)授權(quán)，以及判斷登錄是否過(guò)期的方法
這篇文章主要介紹了微信小程序用戶(hù)授權(quán)及判斷登錄是否過(guò)期，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05