HTML5和CSS3实例教程[总结二]

基于contenteditable属性实现在位编辑

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

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <title>contenteditable</title>
 6   <style>
 7     ul{
 8       list-style: none;
 9     }
10     li{
11       clear: both;
12     }
13     li>b,li>span{
14       display: block;
15       float: left;
16       width: 100px;
17     }
18     li>span{
19       width: 500px;
20       margin-left: 20px;
21     }
22     li>span[contenteditable=true]:hover{
23       background-color: #ffc;
24     }
25     li>span[contenteditable]:focus{
26       background-color: #ffa;
27       border:1px shaded #000;
28     }
29   </style>
30 </head>
31 <body>
32 <h1>User information</h1>
33   <div id="status"></div>
34   <ul>
35     <li><b>Name</b>
36     <span contenteditable="true">Shuai Bi</span>
37     </li>
38     <li><b>City</b>
39     <span contenteditable="true">Anywhere</span>
40     </li>
41     <li><b>State</b>
42     <span contenteditable="true">OH</span>
43     </li>
44     <li><b>Postal Code</b>
45     <span contenteditable="true">10010</span>
46     </li>
47     <li><b>Email</b>
48     <span contenteditable="true">shuaibi@someonecompany.com</span>
49     </li>
50   </ul>
51 </body>
52 </html>

 

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

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

 1 $(function(){
 2     var status = $("#status");
 3     $("span[contenteditable=true]").blur(function() {
 4         var field = $(this).attr('id');
 5         var value = $(this).text();
 6         $.post('/path/to/file', field+"="+value, function(data) {
 7             status.text(data);
 8         });
 9         
10     });
11 })

 

posted @ 2016-07-20 19:35  LiuL_0703  阅读(474)  评论(0)  编辑  收藏  举报