基于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. Caused by: org.apache.ibatis.ognl.OgnlException: source is null for getProperty(null, "mil_id")

    今天在使用mybatis处理数据库的时候,突然抛出了上述异常,让我感到很惊讶,因为在处理save的时候,在Mybatis的配置文件中,我根本就没有使用到ognl表达式,系统怎么会抛出上述异常.而且之前 ...

  2. Win7下Solr4.10.1和TomCat8的安装

    1.系统为win7 64位系统,安装有wamp的环境,我的所有网站放在 d:\webserver下,域名指向该目录下的子目录: 2.安装TomCat8到 D:\Tomcat 8.0: 3.在 d:\w ...

  3. phpcms v9 分页

    phpcms的分页很简单,只需在需要分页的地方写入如下代码即可: <div id="pages">{$pages}</div> 连样式都有了,如果你是调用的 ...

  4. memcache配置与使用

    php100:73:MemCached高级缓存配置 Memcache相关介绍: memcache 是一个高性能的分布式的内存对象缓存系统,它能够存储各种各样的的数据,包括图片,视频,文件等等.缓存功能 ...

  5. CentOS下php使用127.0.0.1不能连接mysql的解决方法

    这篇文章主要介绍了CentOS下php使用127.0.0.1不能连接mysql的解决方法,本文原因是SELINUX导致的连接失败,需要的朋友可以参考下 php代码很简单: 复制代码代码如下: $ser ...

  6. d3可视化实战00：d3的使用心得和学习资料汇总

    最近以来,我使用d3进行我的可视化工具的开发已经3个月了,同时也兼用其他一些图表类库,自我感觉稍微有点心得.之前我也写过相关文章,我涉及的数据可视化的实现技术和工具,但是那篇文章对于项目开发而言太浅了 ...

  7. JS版本网站资源状态检测

    Title:JS版本网站资源状态检测  --2012-08-28 14:08 前几天需要一个网站状态检测的东东,后面写了个蹩脚的JS版本,里面用到了以前没用过的东西,在这里记下来,其实批处理加curl ...

  8. How systems researchers build systems

    Define the problem >>Identify the constraints and abstract problem propose solution:simple ide ...

  9. Sum square difference

    简单: e sum of the squares of the first ten natural numbers is, 12 + 22 + ... + 102 = 385 The square o ...

  10. Local System/Network Service/Local Service

    // The name of the account under which the service should run// 1 NT AUTHORITY\\SYSTEM 2 NT AUTHORIT ...