實(shí)現(xiàn)div可編輯的常見(jiàn)方法總結(jié)
更新時(shí)間：2007年04月30日 00:00:00 作者：
功能：實(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)試一下。
相關(guān)文章
這篇文章主要介紹了Html IFrame的用法及注意點(diǎn),非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-12-12
JavaScript實(shí)現(xiàn)簡(jiǎn)單的計(jì)算器功能
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)簡(jiǎn)單的計(jì)算器功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-03-03
js實(shí)現(xiàn)自定義滾動(dòng)條的示例
這篇文章主要介紹了js實(shí)現(xiàn)自定義滾動(dòng)條的示例，幫助大家制作JS特效，美化自身網(wǎng)頁(yè)，感興趣的朋友可以了解下2020-10-10
有趣的script標(biāo)簽用getAttribute方法來(lái)自腳本吧
有趣的script標(biāo)簽用getAttribute方法來(lái)自腳本吧...2007-03-03
這篇文章主要介紹了JS中常用的輸出方式(五種)的相關(guān)資料，非常不錯(cuò)具有參考借鑒價(jià)值,需要的朋友可以參考下2016-06-06
這篇文章主要介紹了JS數(shù)組splice操作,結(jié)合實(shí)例形式分析了javascript使用splice方法刪除數(shù)組元素相關(guān)操作技巧,需要的朋友可以參考下2019-10-10
基于p5.js實(shí)現(xiàn)色彩輪和餅狀圖的動(dòng)態(tài)可視化
這篇文章主要介紹了基于p5.js實(shí)現(xiàn)色彩輪和餅狀圖的動(dòng)態(tài)可視化,文中給出了詳細(xì)的代碼,它適用于需要展示顏色信息或數(shù)據(jù)分布情況的場(chǎng)景,如設(shè)計(jì)、數(shù)據(jù)分析和教育領(lǐng)域,感興趣的朋友可以參考下2024-06-06
JavaScript已經(jīng)內(nèi)置了很多強(qiáng)大的方法，但有時(shí)你需要的某個(gè)功能在內(nèi)置的方法中沒(méi)有，我們?cè)趺磥?lái)優(yōu)雅地?cái)U(kuò)展JavaScript功能呢2012-04-04
刷新頁(yè)面的幾種方法小結(jié)(JS,ASP.NET)
本篇文章只要是對(duì)刷新頁(yè)面的幾種方法進(jìn)行了詳細(xì)的總結(jié)介紹，包括JS與ASP.NET。需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2014-01-01
javascript設(shè)計(jì)模式 – 迭代器模式原理與用法實(shí)例分析
這篇文章主要介紹了javascript設(shè)計(jì)模式 – 迭代器模式原理與用法,結(jié)合實(shí)例形式分析了javascript迭代器模式相關(guān)概念、原理、用法及操作注意事項(xiàng),需要的朋友可以參考下2020-04-04