【即点即改】关于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') //获取到当前要修改的IDif(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>")}})}
})

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

想要即时让文本框变化，说明是当我们往文本框里面插入文字后测量出文本的宽度，把这个宽度赋值给文本框实现的。

然后就是如何用代码实现了，我们知道获取文本的长度是用length，但是length得到的值是文本的字节，而不是我们需要的像素px

，有点同学会说jquery里面有一个width（）方法可以获取，但是我们看手册发现这个方法

是只能够测量匹配到的对象的宽度，而我们得到的值是个字符串。

当然这根本不是什么难题，那咱就让他变成一个对象，随便找个地方定义一个span标签，把它隐藏起来，然后把得到的字符串放

进去然后通过这个类名匹配到这个span标签，ok、成功获取到这个span对象，女朋友找到了该办正事了

使用css方法将当前的input文本框宽度改变 NICE 完成请看下面完整代码

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

10-89 将学号为“1911201”的学生系别改为“经管学院”，班级改为“19经管1”（update的用法）
10-89 将学号为"1911201"的学生系别改为"经管学院",班级改为"19经管1" 分数 5 全屏浏览题目切换布局作者 sy 单位 ...
RK平台调试串口改普通串口，FIQ串口改串口号
一.把调试串口即FIQ串口修改为普通串口 Kernel部分:注释掉kernel config里的FIQ_DEBUGGER相关配置#CONFIG_FIQ_DEBUGGER=y #CONFIG_FIQ_D ...
小米8 小米9 红米小米改串高通处理器硬改参数改机演示视频工具
小米8 小米9 红米小米改串高通处理器硬改参数改机演示视频工具小米8 小米9 红米小米改串高通处理器硬改参数改机演示视频工具
4g串口服务器怎么改无线密码,移动路由器怎么改密码移动无线WIFI密码修改方法【详解】...
[移动路由器改密码]移动路由器怎么改密码移动无线WIFI密码怎么改移动wifi怎么改密码? 1.看是用的那一家的路由器,你可以看一下背面的标签: 2. 打开浏览器,在里面输入上面的那个两个地址其中 ...
td里面字体大小怎么改_王者荣耀战区怎么改到其他地方 2020荣耀战区修改方法...
直接进入话题↓ 王者荣耀2020年荣耀战区在哪里改? 第一步,点击左上角的头像这样可以进入个人主页,左下角最后有个社交. 第二步,点击一下社交,可以看到第一个是交友名片,右边有个荣耀战区,战区如果隐藏 ...
linux终端名字怎么改,Ubuntu系统把终端用户名改成红色的技巧
Ubuntu系统很多文件和窗口都是以代码的形式显示的,这些代码中包括了终端用户名,如果能够Ubuntu系统把终端用户名改成红色,就可以方便用户查看.本文就来介绍一下Ubuntu系统把终端用户名改成红色 ...
linux-修改pip包的下载源-改为国内境象提升速度
>以root帐户登陆 >切换到根目录 >创建一个隐藏目录 mkdir .pip >进入这个隐藏目录 >编辑配置文件如果有就改,没有就创建 vim pip.conf &g ...
td里面字体大小怎么改_教你王者荣耀改战区
王者荣耀怎么改荣耀战区呢?今天小编给大家带来的是王者荣耀改荣耀战区方法哦!想知道的小伙伴就和小编一起来看看吧! 1.首先玩家需要下载一个多开器,保证能够多开王者荣耀,多开器安卓的可以直接市场里面找,苹 ...
php登录改为用户名,Laravel 认证脚手架改为使用用户名登录
新建一个名为 project 的 laravel 项目 composer create-project --prefer-dist laravel/laravel project cd project ...
tp5ajax即点即改,TP5中即点即改，json分页，单删
HTML页面: content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, mi ...

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

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

最新文章

热门文章