功能:實(shí)現(xiàn)網(wǎng)頁(yè)內(nèi)容的即時(shí)編輯,增加頁(yè)面的可用性、交互性。 方法1:直接通過(guò)textarea標(biāo)簽實(shí)現(xiàn),請(qǐng)運(yùn)行下邊代碼: New Document </textarea> [Ctrl+A 全選 注:如需引入外部Js需刷新才能執(zhí)行]思路:將textarea通過(guò)CSS樣式設(shè)計(jì)成讓用戶感覺(jué)不像是textarea的樣子,通過(guò)onblur、oumouseout等屬性進(jìn)行ajax保存用戶數(shù)據(jù)。方法二:通過(guò)document.createElement的方法向頁(yè)面增加input來(lái)實(shí)現(xiàn)。請(qǐng)運(yùn)行下邊代碼: New Document 點(diǎn)擊這里就可以編輯 [Ctrl+A 全選 注:如需引入外部Js需刷新才能執(zhí)行]思路: 1、當(dāng)用戶鼠標(biāo)經(jīng)過(guò)可編輯區(qū)域時(shí),用背景色等方式提醒用戶該區(qū)域可編輯。 2、當(dāng)用戶鼠標(biāo)點(diǎn)擊該區(qū)域時(shí),也就是onclick事件時(shí),先將原來(lái)的內(nèi)容清掉,將臨時(shí)創(chuàng)建出來(lái)一個(gè)輸入框和一個(gè)輸入按扭。 3、用戶修改完后,點(diǎn)擊“保存”按扭時(shí)通過(guò)ajax向數(shù)據(jù)庫(kù)中寫(xiě)入新的數(shù)據(jù)。 PS:第二個(gè)方法的代碼還有點(diǎn)問(wèn)題,有空再來(lái)調(diào)試一下。 JavaScript技術(shù):實(shí)現(xiàn)div可編輯的常見(jiàn)方法總結(jié),轉(zhuǎn)載需保留來(lái)源! 鄭重聲明:本文版權(quán)歸原作者所有,轉(zhuǎn)載文章僅為傳播更多信息之目的,如作者信息標(biāo)記有誤,請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除,多謝。