快捷導(dǎo)航

用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ì)成讓用戶感覺(jué)不像是textarea的樣子，通過(guò)onblur、oumouseout等屬性進(jìn)行ajax保存用戶數(shù)據(jù)。
方法二：通過(guò)document.createElement的方法向頁(yè)面增加input來(lái)實(shí)現(xiàn)。請(qǐng)運(yùn)行下邊代碼：

[Ctrl+A 全選注:引入外部Js需再刷新一下頁(yè)面才能執(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í)現(xiàn)div可編輯的常見(jiàn)方法

相關(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
js 事件截取enter按鍵頁(yè)面提交事件示例代碼
本篇文章主要是對(duì)js 事件截取enter按鍵頁(yè)面提交事件示例代碼進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
2014-03-03
微信小程序獲取用戶openid的圖文教程(含源碼)
微信小程序的開(kāi)發(fā)過(guò)程中,有時(shí)前端需要獲取到openId來(lái)使用,下面這篇文章主要給大家介紹了關(guān)于微信小程序獲取用戶openid的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-01-01
BootStrap中<li role=
最近在學(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
mock.js模擬前后臺(tái)交互
這篇文章主要為大家詳細(xì)介紹了mock.js模擬前后臺(tái)交互的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-07-07