基于contenteditable属性实现在位编辑

HTML5规范引入了contenteditable属性，它几乎可以用在任何元素上，只要添加这一属性 即可变为可编译区域

 <!DOCTYPE html>

 <html lang="en">

 <head>

   <meta charset="UTF-8">

   <title>contenteditable</title>

   <style>

     ul{

       list-style: none;

     }

     li{

       clear: both;

     }

     li>b,li>span{

       display: block;

       float: left;

       width: 100px;

     }

     li>span{

       width: 500px;

       margin-left: 20px;

     }

     li>span[contenteditable=true]:hover{

       background-color: #ffc;

     }

     li>span[contenteditable]:focus{

       background-color: #ffa;

       border:1px shaded #000;

     }

   </style>

 </head>

 <body>

 <h1>User information</h1>

   <div id="status"></div>

   <ul>

     <li><b>Name</b>

     <span contenteditable="true">Shuai Bi</span>

     </li>

     <li><b>City</b>

     <span contenteditable="true">Anywhere</span>

     </li>

     <li><b>State</b>

     <span contenteditable="true">OH</span>

     </li>

     <li><b>Postal Code</b>

     <span contenteditable="true">10010</span>

     </li>

     <li><b>Email</b>

     <span contenteditable="true">shuaibi@someonecompany.com</span>

     </li>

   </ul>

 </body>

 </html>

现在虽然可以在位编辑但是离开当前页面或者刷新之后，修改数据会丢失 ，借助jQuery实现将修改后的数据提交到后台

实现思路是为每一个contenteditable属性值为true的span标签添加事件监听器 ，具体代码如下：

 $(function(){

     var status = $("#status");

     $("span[contenteditable=true]").blur(function() {

         var field = $(this).attr('id');

         var value = $(this).text();

         $.post('/path/to/file', field+"="+value, function(data) {

             status.text(data);

         });

     });

 })

HTML5和CSS3实例教程[总结二]的更多相关文章

  1. 《HTML5与CSS3实例教程》

    <HTML5与CSS3实例教程> 基本信息 作者: (美)Brian P. Hogan 译者: 卢俊祥 丛书名: 图灵程序设计丛书 出版社:人民邮电出版社 ISBN:97871153634 ...

  2. HTML5和CSS3实例教程 中文版 高清PDF扫描版

    HTML5和CSS3实例教程共分3部分,集中讨论了HTML5和CSS3规范及其技术的使用方法.首先是规范概述,介绍了新的结构化标签.表单域及其功能(包括自动聚焦功能和占位文本)和CSS3的新选择器.接 ...

  3. HTML5与CSS3实例教程(第2版) 附源码 中文pdf扫描版

    HTML5和CSS3技术是目前整个网页的基础.<HTML5与CSS3实例教程(第2版)>共分3部分,集中讨论了HTML5和CSS3规范及其技术的使用方法.这一版全面讲解了最新的HTML5和 ...

  4. HTML5和CSS3实例教程[总结一]

    关于onclick的行为与内容分离 通过链接触发弹出窗口方式 (不推荐使用此方法!!!) <a href='#' onclcik = "window.open('holiday_pay ...

  5. 《HTML5与CSS3基础教程(第8版)》

    <HTML5与CSS3基础教程(第8版)> 基本信息 原书名:HTML and CSS:visual quickstart guide 作者: (美)Elizabeth Castro    ...

  6. HTML5与CSS3基础教程(第7版) 高清PDF扫描版​

    HTML5与CSS3基础教程(第7版)试读不仅介绍了文本.图像.链接.列表.表格.表单.多媒体等网页元素,也介绍了如何为网页设计结构.布局,添加动态效果.格式化等形式,此外还涉及调试和发布.聚合和吸引 ...

  7. HTML5与CSS3基础教程(第8版) PDF扫描版​

    <HTML5与CSS3基础教程(第8版)>自第1版至今,一直是讲解HTML和CSS入门知识的经典畅销书,全面系统地阐述HTML5和CSS3基础知识以及实际运用技术,通过大量实例深入浅出地分 ...

  8. Python导出Excel为Lua/Json/Xml实例教程（二）：xlrd初体验

    Python导出Excel为Lua/Json/Xml实例教程(二):xlrd初体验 相关链接: Python导出Excel为Lua/Json/Xml实例教程(一):初识Python Python导出E ...

  9. 【02】HTML5与CSS3基础教程（第8版）（全）

    [02]HTML5与CSS3基础教程(第8版)(全)   共392页.   (魔芋:大体上扫了一遍.没有什么新东西,都是入门的一些基础知识.) 已看完.       [美]elizabeth cast ...

随机推荐

  1. JavaScript 类、构造函数、原型

    类.构造函数.原型  :本质均为函数 利用的原理是:词法作用域,调用对象及作用域链  闭包  属性查找方式    设计和new运算符一起使用的函数叫做构造函数. 构造函数的工作:初始化一个新创建的对象 ...

  2. OREACLE 数据库建表 添加判断表是否存在 不存在则新建

    declare  cnt number; begin   ---查询要创建的表是否存在   select count(*)into cnt from user_tables where table_n ...

  3. js鼠标右键操作

    一个页面中,BODY中用oncontextmenu='return false'来取消鼠标右键: 在JS中设置oncontextmenu='return true'用window.document. ...

  4. IE6-BUG-CSS兼容详解

    1.IE6背景闪烁 如果你给链接.按钮用CSS sprites作为背景,你可能会发现在IE6下会有背景图闪烁的现象.造成这个的原因是由于IE6没有将背景图缓存,每次触发hover的时候都会重新加载,可 ...

  5. memcache的使用

    什么是memcache? Memcache是一个高性能的分布式的内存对象缓存系统,通过在内存里维护一个统一的巨大的hash表,它能够用来存储各种格式的数据,包括图像.视频.文件以及数据库检索的结果等. ...

  6. Android Studio下运行UiAutomator

    之前学习UiAutomator均是在eclipse下,因学习Android开发接触AS越来越频繁,于是想知道AS下如何建立UiAutomator项目.网上的资料多很凌乱,查了很多资料,实践后发现,只要 ...

  7. 使用国内镜像更新sdk方法

    使用国内的镜像资源: 1.mirrors.neusoft.edu.cn //东软信息学院 2.ubuntu.buct.edu.cn/ubuntu.buct.cn //北京化工大学 3.mirrors. ...

  8. html标签引入外部html

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. WebBrowser执行脚本

    ExecuteJavaScript(WebBrowser:TWebBrowser; Code: string):Variant;var //发送脚本Document:IHTMLDocument2;Wi ...

  10. 【转】Android菜单详解——理解android中的Menu--不错

    原文网址:http://www.cnblogs.com/qingblog/archive/2012/06/08/2541709.html 前言 今天看了pro android 3中menu这一章,对A ...