基于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. 使用nw.js将html项目打包为桌面程序

    首先需要确保电脑已经布置好node.js环境 1.下载并全局安装nw.js npm install nw -g 2.安装nw-builder模块 npm install nw-builder -g 3 ...

  2. Debian/Ubuntu手动编译安装MongoDB C++11驱动及驱动测试

    本文章仅限cnblogs网站内转载!请某网站自觉,遵纪守法,尊重原创! 系统环境情况: 最小化.无桌面环境 新安装的Debian 8 Server 版本操作系统虚拟机一台 手动编译安装MongoDB ...

  3. 学习笔记 之--AJAX核心对象 XMLHttpRequest

    实现AJAX功能,核心就是XMLHttpRequest,而且现在大多数浏览器都支持这个核心组件对象. 实例:实现无刷新登陆验证 1.前台代码 <html xmlns="http://w ...

  4. C#数字图像处理的3种方法

    本文主要通过彩色图象灰度化来介绍C#处理数字图像的3种方法,Bitmap类.BitmapData类和Graphics类是C#处理图像的的3个重要的类. Bitmap只要用于处理由像素数据定义的图像的对 ...

  5. Today's interview of C#

    I think they are advanced topics. C# 1. when will you use list, when will you use hashtable. 2. when ...

  6. xpath应用

    import java.io.File; import java.io.FileOutputStream; import org.dom4j.Document; import org.dom4j.El ...

  7. SQL语句中output的用法

    在SQL语句中,output可以作为返回值来使用, 1.我们先看这个存储过程 代码: 1 set ANSI_NULLS ON  2 set QUOTED_IDENTIFIER ON  3 go  4 ...

  8. win64安装及配置apache+php+mysql

    Windows是64位Win7,所以Apache.PHP和Mysql都选用的64位版本(最好是统一64位). Apache:httpd-2.4.7-win64.zip PHP:PHP-5.4.6-Wi ...

  9. xx通CGI流量控制

    流量控制共分2步,首先在CGI框架对用户的ip作限制,第二限制每个CGI的流量.   一.基于IP的流量控制 用共享内存(shm)的方式保存基于ip的访问信息. 配置文件中 <variable ...

  10. Oracle 基本命令

    (1)查看所有表 >select * from tab; (2)查看表结构 >desc 表名; (3)将查询出来的字段显示为其他名称 >select empno as 员工编号 fr ...