Jquery实现点击文字后变成文本框，修改发送后台保存

浏览数：41 / 时间：2015年06月09日

本文实现以下几个功能：

1.点击文字变为文本框，并选中文字
2.对文本框内容进行修改
3.点击文本框以外的地方文本框再次变为修改后的文字，如果是删除文字，显示默认提示文字
4. 同步更新SQL数据库内容

首先是HTML模板部分：

 1 <{if !empty($img_list)}>
 2 <{foreach $img_list as $kk=>$vv}>
 3 <div class="item-box radius3">
 4     <a href="<{$vv[‘image‘]}>" target="_blank">
 5     <div class="item-image">
 6         <img src="<{$vv[‘image‘]}>?imageView/0/w/260/q/85" />
 7     </div>
 8     </a>
 9     <div class="item-desc" >
10         <span class="item-desc-span"><{$vv[‘name‘]}></span>
11         <input type="hidden" name="image_id" value="<{$vv[‘id‘]}>" />
12     </div>
13     <div class="item-op">
14     
15         <{date(‘Y-m-d h:i:s‘,$vv[‘add_time‘])}>
16         <div class="opAbs">
17         <{if $vv[‘status‘]==0}>
18             <span class="op" onclick="set_cover(<{$vv[‘id‘]}>)" >设为封面</span>&nbsp;    
19         <{/if}>
20             <span class="op" onclick="image_del(<{$vv[‘id‘]}>)" >删除</span>
21             &nbsp;    
22             
23             
24         </div>
25     </div>
26 </div>
27 <{/foreach}>
28 <{/if}>

再来是处理脚本：

<script type="text/javascript">
	$(function(){
		$(".item-desc-span").click(function(){
			var span_str = $(this); 
			var ex_desc_str = span_str.text(); 
			var input_str = $("<input type=‘text‘ class=‘editTxt‘ name=‘desc‘ value=‘"+ex_desc_str+"‘ />");
			span_str.html(input_str); 
			input_str.click(function() { return false; }); 
			input_str.trigger("focus"); 
			input_str.select();
			//input失去焦点时候
			input_str.blur(function(){ 
				var to_desc = $(this).val();
				var id = $(this).parent().next(‘input‘).val();
				$.ajax({
			          type: ‘POST‘,
			          url: ‘/club_image/set_desc‘,
			          dataType: ‘json‘,
			          data:{‘id‘: id,‘desc‘:to_desc},
			          success: function(data){             	         	        	      
			          	if(data.success==1){
			          		if(to_desc){
			          			span_str.html(to_desc);
			          		}else{
			          			span_str.html(‘暂无描述‘);
			          		}
						}else{
							span_str.html(ex_desc_str);
							alert("后台错误："+data.msg); 	
						}
			          },
			          error: function(data){            	
			             alert("AJAX错误");
			             ret = false;
			          }
			      });
			});
			//按下回车键时候
			input_str.keydown(function(event){
				  if(event.keyCode == 13 ) {
					  var to_desc = $(this).val();
					  var id = $(this).parent().next(‘input‘).val();
						$.ajax({
					          type: ‘POST‘,
					          url: ‘/club_image/set_desc‘,
					          dataType: ‘json‘,
					          data:{‘id‘: id,‘desc‘:to_desc},
					          success: function(data){             	         	        	      
					          	if(data.success==1){
					          		if(to_desc){
					          			span_str.html(to_desc);
					          		}else{
					          			span_str.html(‘暂无描述‘);
					          		}
								}else{
									span_str.html(ex_desc_str);
									alert("后台错误："+data.msg); 	
								}
					          },
					          error: function(data){            	
					             alert("AJAX错误");
					             ret = false;
					          }
					      });
				  }
			});
			
		});
	});
</script>

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

Jquery实现点击文字后变成文本框，修改发送后台保存