基于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. php改写session到数据库

    session改写mysql 在调用 session_start();的地方改用实例化本类即可new SessionDB(); session_set_save_handler( array($thi ...

  2. uva 482 - Permutation Arrays

    <int, double> --> <int, string> 从而避免了输出格式: #include <vector> #include <strin ...

  3. HTML5 canvas 中的线条样式

    线条样式属性 lineCap        设置或返回线条的结束端点样式 butt         默认.向线条的每个末端添加平直的边缘. round         向线条的每个末端添加圆形线帽. ...

  4. HTTPS 服务器搭建

    利用NGINX搭建HTTPS服务器不是一件困难的事情,过程包括以下几步 第一步:利用OpenSSL制作证书 第二步:安装NGINX,configure中保证加入ngx_http_ssl_module. ...

  5. C#泛型理解（转）

    [译]C# 理解泛型  PDF 浏览:http://www.tracefact.net/document/generics-in-csharp.pdf源码下载:http://www.tracefact ...

  6. (摘)Chart Y轴设置为百分比

    放置一个Chart控件,未做任何设置:然后编写代码: //设置chart2.Legends[0].Enabled = false;//不显示图例 chart2.ChartAreas[0].BackCo ...

  7. 用PYTHON实现将电脑里的所有文件按大小排序，便于清理

    嘿嘿,慢慢找到写代码的感觉了. 这个小程序涉及的东东还是很多的,数据结构的设计,错误的处理,快速字典排序,文件数值调整.... import os,os.path import glob SUFFIX ...

  8. Visual Studio新建的源文件的默认编码

    原来VS新建的源文件默认的编码是根据系统locale选择的.我的是国标2312.我草.可坑死我了.一直不知道. 当时主要是需要用doxygen生成html文档,它默认的输入文件的格式是UTF-8,是不 ...

  9. 【HDOJ】1500 Chopsticks

    DP. #include <cstdio> #include <cstring> #include <cstdlib> #include <algorithm ...

  10. 如何在Windows下使用matplotlib

    在开始之前,向matplotlib的创造者,John D. Hunter表示崇高的敬意,和无尽的怀念. (John D. Hunter 1968-2012) matplotlib是一个给予Python ...