双击文字可编辑

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>双击可编辑</title>
 6 </head>
 7 <body>
 8 <style type="text/css">
 9     *{
10         margin: 0;
11         padding: 0;
12     }
13     .edit-text{
14         margin-top: 20px;
15         background: #eee;
16         display: inline-block;
17         font-size: 15px;
18         padding:4px 12px;
19     }
20     .form-control{
21         margin:-5px -13px;
22         padding: 4px 12px;
23         border: 1px solid #c66;
24          auto;
25         background: #eee;
26         font-size: 15px;
27     }
28 </style>
29 <div class="edit-text">青梅枯萎，竹马老去。</div>
30 <div class="edit-text">从此我爱上的每个人都像是你。</div>
31 <script src="jquery-2.1.1.min.js"></script>
32 <script type="text/javascript">
33     $('.edit-text').on("dblclick",function(){        
34         var _this=$(this);
35         if(_this.find('.form-control').length){
36             return false;
37         }
38         var Txt=_this.text();
39         var editHtml='<input type="text" class="form-control">';
40         _this.html(editHtml);
41         var inputTxt=_this.find('.form-control');
42         inputTxt.val(Txt);
43     
44         inputTxt.on('blur',function(){
45             var Txts=$(this).val()||Txt;
46             $(this).parent('div').html(Txts);
47         })
48     });
49 </script>
50 </body>
51 </html>

一，div的双击事件（dblclick）;

二，双击时加文本框

三，文档框失去焦点时，值为输入的值或原始值。

四，双击事件要判断是否已经存在文本框，如果存在，则不再向下运行。