jquery的点击后前台页面普通文字变文本框可以修改

bart2011

关注

原创最新推荐文章于 2025-11-06 16:01:04 发布 3.3k 阅读 AI 写同款· GEO 优化 ›

Vue3 - 详细实现点击文字或按钮后 “变成输入框“ 进行文本编辑，同时能保存修改和取消编辑状态功能，文本旁边有笔图标点击后文字变成 input 框可对文字编辑修改，最新解决方案（详细示例代码教程） vue3，nuxt3，点击变成输入框，点击编辑按钮让文本变为input方便修改，点击元素变输入框，可编辑input输入框，点击文字内容后变成＜input＞输入框同时能修改和取消、删除，输入框input点击右侧编辑图标后变为可编辑状态，当失去焦点后自动保存，vue文字点击变为输入框能修改，内容变成input可以修改，vue3点击按钮后旁边的文字变为可编辑，组件插件，教程，使文本变成可编辑的效果，点击取消复原，失去焦点还原，取消后恢复成原来的样子，如何实现点笔icon图标将html变成文本输入域能修改和移除，点阅读详情

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>itcast.cn的JQuery示例:可以编辑的表格</title> <link type="text/css" rel="stylesheet" href="css/edit.css" mce_href="css/edit.css"/> <mce:script type="text/javascript" src="jslib/jquery-1.5.2.js" mce_src="jslib/jquery-1.5.2.js"></mce:script> <mce:script type="text/javascript" src="jslib/jqueryedit.js" mce_src="jslib/jqueryedit.js"></mce:script> </head> <body>  <table > <tbody> <tr> <td>123321</td> <td>123456</td> </tr> </tbody> </table> </body> </html> //在页面装载是让所有的td都拥有一个点击事件 $(document).ready(function(){ //找到所有的td节点 var tds = $("td"); //给所有的td节点增加点击事件 tds.click(tdclick); }); //td的点击事件 function tdclick(){ //保存当前的td节点 var td = $(this); //1.取出当前td中的文本内容保存起来 var text = td.text(); //2.清空td中的文本内容 //第一种 td.html(""); //第二种 //td.empty(); //3.建立一个文本框也就是input的元素节点 (没有尖括号时候是找,有尖括号时是创建) var input = $("<input>"); //4.设置文本框的值是保存起来的文本内容 input.attr("value", text); //4.5 让文本框能够响应键盘按下的事件 input.blur(function(event) { var cfm = confirm("是否确认修改"); if(cfm){ //0 获取当前用户点击空白处时 //解决不同的浏览器获取时间的对象的差异 //var myEvent = event || window.event; //var kcode = myEvent.keyCode; //1 判断是否是回车按下 //if (kcode == 13) //{ //var inputnode = $(this); //2.获取当前文本框的内容 //var inputtext = inputnode.val(); var inputtext = input.val(); //3.清空td里面的内容 //var tdNode = inputnode.parent(); var tdNode = input.parent(); //拿到td节点 //4.将保存的文本框的内容填充到td中 tdNode.html(inputtext); //5.让td重新拥有点击事件 tdNode.click(tdclick); //} } }); // input.keyup(function(event) { // //0 获取当前用户按下的键值 // //解决不同的浏览器获取时间的对象的差异 // var myEvent = event || window.event; // var kcode = myEvent.keyCode; // //1 判断是否是回车按下 // if (kcode == 13) // { // //var inputnode = $(this); // // //2.获取当前文本框的内容 // //var inputtext = inputnode.val(); // var inputtext = input.val(); // //3.清空td里面的内容 // //var tdNode = inputnode.parent(); // var tdNode = input.parent(); //拿到td节点 // //4.将保存的文本框的内容填充到td中 // tdNode.html(inputtext); // //5.让td重新拥有点击事件 // tdNode.click(tdclick); // } // // }); //5.把文本框加到td中去 td.append(input);//也可以用input.appendTo(td); //5.5让文本狂中的文字被高亮选中 //需要将jquery的对象转换为dom对象 var inputdom = input.get(0); inputdom.select(); //6.清除td上注册的点击事件 td.unbind("click"); }

table,td{ border-collapse:collapse;/*让相邻的边框合并*/ border:1px solid black;/*边框1个像素*/ }

收录于