基于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. WPF Mahapps.Metro 设置主题样式

    /// <summary> /// 设置App样式 /// </summary> /// <param name="accentName">窗口 ...

  2. oracle单行函数之类型转换

    oracle数据类型转换:显示转换盒隐式转换 oracle自动完成转换

  3. The Primo ScholarRank Technology: Bringing the Most Relevant Results to the Top of the List

    By Tamar Sadeh, Director of Marketing In today’s world, users’ expectations for a quick and easy sea ...

  4. zabbix log(logrt) key的使用

    今天看了篇帖子是关于如何利用zabbix 自带的key去读log,监控linux异常登陆,一直以来都是自己写脚本去读log的.就想看看这个zabbix log 这个key怎么样..好吧开始: 官方文档 ...

  5. 转 常用JQuery插件整理

    虽然自己也写过插件,但JQuery插件种类的繁多,大多时候,我还是使用别人写好的插件,这些都是我用了同类插件里较为不错的一些,今天就整理一下公开放出来. UI: jquery.HooRay(哈哈,自己 ...

  6. jquery keyup 在IOS设备上输入中文时不触发

    今天做一个异步查询功能的时候发现在IOS设备上查询中文时keyup没有触发,在其他设备上时可以的,后来在stackoverflow上找到下面这种解决方法,贴出来算是抛砖引玉了. $h_input.on ...

  7. Java基础学习第二天

    ================每日必读==================== 写代码: 1.明确需求.我需要实现什么需求? 2.分析思路.我需要怎么实现需求? 3.确定步骤.我的每一部分思路需要使 ...

  8. Android 给TextView添加点击事件

    首先设定TextView的clickable属性为true. 可以在布局文件中进行设定,比如: <TextView android:id="@+id/phone" andro ...

  9. 8.2.1.2 How MySQL Optimizes WHERE Clauses MySQL 优化WHERE 子句

    8.2.1.2 How MySQL Optimizes WHERE Clauses MySQL 优化WHERE 子句 本节讨论优化用于处理WHERE子句, 例子是使用SELECT 语句,但是相同的优化 ...

  10. BZOJ3399: [Usaco2009 Mar]Sand Castle城堡

    3399: [Usaco2009 Mar]Sand Castle城堡 Time Limit: 3 Sec  Memory Limit: 128 MBSubmit: 22  Solved: 17[Sub ...