suchen

Heim  >  Artikel  >  Web-Frontend  >  用javascript实现div可编辑的常见方法_javascript技巧

用javascript实现div可编辑的常见方法_javascript技巧

WBOY
WBOYOriginal
2016-05-16 19:08:131007Durchsuche

功能：实现网页内容的即时编辑，增加页面的可用性、交互性。
方法1：直接通过textarea标签实现，请运行下边代码：


[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

思路：将textarea通过CSS样式设计成让用户感觉不像是textarea的样子，通过onblur、oumouseout等属性进行ajax保存用户数据。
方法二：通过document.createElement的方法向页面增加input来实现。请运行下边代码：

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

思路：
1、当用户鼠标经过可编辑区域时，用背景色等方式提醒用户该区域可编辑。
2、当用户鼠标点击该区域时，也就是onclick事件时，先将原来的内容清掉，将临时创建出来一个输入框和一个输入按扭。
3、用户修改完后，点击“保存”按扭时通过ajax向数据库中写入新的数据。

PS：第二个方法的代码还有点问题，有空再来调试一下。
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：javascript select 之间传值效果的代码_表单特效Nächster Artikel：才发现的超链接js导致网页中GIF动画停止的解决方法_javascript技巧

In Verbindung stehende Artikel

Mehr sehen