實(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)文章
JavaScript學(xué)習(xí)小結(jié)(一)——JavaScript入門(mén)基礎(chǔ)
本教程比較適合javascript初學(xué)者，對(duì)javascript基本知識(shí)的小結(jié)包括變量，基本類(lèi)型等知識(shí)點(diǎn)，需要的朋友一起來(lái)學(xué)習(xí)吧2015-09-09
這篇文章主要介紹了分析JavaScript中this引發(fā)的bug以及相關(guān)的處理方法分析，一起學(xué)習(xí)下吧。2017-12-12
微信小程序?qū)崿F(xiàn)動(dòng)態(tài)驗(yàn)證碼
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)動(dòng)態(tài)驗(yàn)證碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-05-05
js 獲取class的元素的方法 以及創(chuàng)建方法getElementsByClassName
js 獲取class的元素的方法 以及創(chuàng)建方法getElementsByClassName，需要的朋友可以參考一下2013-03-03
下面小編就為大家?guī)?lái)一篇老生常談ES6中的類(lèi)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07
Javascript 獲取鼠標(biāo)當(dāng)前的位置實(shí)現(xiàn)方法
這篇文章主要介紹了Javascript 獲取鼠標(biāo)當(dāng)前的位置實(shí)現(xiàn)方法的相關(guān)資料,需要的朋友可以參考下2016-10-10
這篇文章主要介紹了js控制表單不能輸入空格的小例子，有需要的朋友可以參考一下2013-11-11
今天小編就為大家分享一篇關(guān)于js中對(duì)象和面向?qū)ο笈cJson介紹，小編覺(jué)得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來(lái)看看吧2019-01-01
uniapp和uniCloud開(kāi)發(fā)中常出現(xiàn)的問(wèn)題及解決匯總
使用uni 開(kāi)發(fā)一段時(shí)間了,下面這篇文章主要給大家介紹了關(guān)于uniapp和uniCloud開(kāi)發(fā)中常出現(xiàn)的問(wèn)題及解決的相關(guān)資料,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12
JavaScript 判斷iPhone X Series機(jī)型的方法
這篇文章主要介紹了JavaScript 判斷iPhone X Series機(jī)型的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-01-01