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）;
二，双击时加文本框
三，文档框失去焦点时，值为输入的值或原始值。
四，双击事件要判断是否已经存在文本框，如果存在，则不再向下运行。