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