【即点即改】关于PHP即点即改的一些东西

Post author:xfxia
Post published:2023年8月31日
Post category:php

该文章为本人在学习PHP时的一些小知识

，如有不足之处请指正

首先呢，我们知道即点即改的思路大概就是给你要修改的文本绑定一个点击click事件，

当你点击该文本的时候先把这个文本取到，

然后替换成文本框，把取到的文本放到input文本框里，然后光标离开文本框，对比如果文本发送改变即发送Ajax进行后台修改，如果没有发生改动则将旧的文本放回去，我们看代码

//要点击要修改的文本  我们使用事件委托  为的是可以进行多次修改
$(document).on('click','.first-cell span',function(){
	obj = $(this);	        //当前span对象
	old_val = obj.text();	//获取旧值
	var w = obj.width()     //获取当前文本的宽度（也就是span对象的宽度）	
	var h = obj.height()	//获取当前文本的高度
							
	//插入文本框 将旧值放入  让它的高和宽稍微比文本多一点点  而不是全部固定的
	obj.parent().html('<input type="text" value='+old_val+' style="width:'+(w+4)+'px;height:'+(h+2)+'px;border:1px solid blue">')
	
        //将光标获取到放到文本的尾部
	//其原理就是获得焦点后重新把自己复制粘帖一下 
	$('.first-cell input').val("").focus().val(old_val);			
})

这上面的是点击文本的事件

注意：不要将光标离开事件写到上面的时间里面

//光标离开文本框
$(document).on('blur','.first-cell input',function(){
	var input = $(this);        //当前的文本框对象
	var new_val = input.val();	//更改后的新值
	var goods_id = input.parents('tr').attr('id') //获取到当前要修改的ID
	if(old_val==new_val){
		//如果值没有发生改变 将原值放回去
		input.parent().html("<span>"+old_val+"</span>")
	}else{
              //否则发送ajax执行修改   这里我使用的CI框架 ajax的使用方式因人而异
              var url = "<?php echo site_url('admin/Goods/changeName')?>";	//路径
		$.post(url,{'goods_id':goods_id,'goods_name':new_val},function(data){
		   if(data==0){
		   //修改成功	
			input.parent().html("<span>"+new_val+"</span>")
		   }else{
		   //修改失败
		        input.parent().html("<span>"+old_val+"</span>")
		   }
	       })
	}
})

以上的代码已经将即点即改完成了很完美了，

但是我还觉得有点小缺陷，就是如果以前的文字少，我点击修改后文字非常多了，这样文本框就放不下文字了。很别扭，所以再给它加个时间，使之文本框随着插入的文本宽度的变化而变化