点击使文字变文本框且可编辑的JS

模仿QQ空间布局时，为了模拟好友分组编辑部分，大量搜集js代码，经过多重比较和修改，终于提炼到了我目前为止遇到的比较实用的脚本了，其中我中意的优点：无需id定义，只定义类就可以，，代码简便，尤其适用后台，因为，朋友已成功运用于后台交互中，先提供代码，做个标记（PS：忘记从哪里下载的JS源码，但十分感谢作者大神。。。感谢。。。）

<script>$(function() { //获取class为caname的元素 $(".t2").click(function() { var td = $(".t1"); var txt = td.text(); var input = $("<input type='text'value='" + txt + "'/>"); td.html(input); input.click(function() { return false; }); //获取焦点 input.trigger("focus"); //文本框失去焦点后提交内容，重新变为文本 input.blur(function() { var newtxt = $(this).val(); //判断文本有没有修改 if (newtxt != txt) { td.html(newtxt); /* *不需要使用数据库的这段可以不需要 var caid = $.trim(td.PRev().text()); //Ajax异步更改数据库,加参数date是解决缓存问题 var url = "../common/Handler2.ashx?caname=" + newtxt + "&caid=" + caid + "&date=" + new Date(); //使用get()方法打开一个一般处理程序，data接受返回的参数（在一般处理程序中返回参数的方法 context.Response.Write("要返回的参数");） //数据库的修改就在一般处理程序中完成 $.get(url, function(data) { if(data=="1") { alert("该类别已存在！"); td.html(txt); return; } alert(data); td.html(newtxt); }); */ } else { td.html(newtxt); } }); }); });

/* document.getElementById("click1").onclick=function(){ var text=document.getElementById("t1"); var val=text.innerHTML; text.innerHTML="<input type='text' id='m' value="+val+" />"; document.getElementById("m").addEventListener("blur",function(e){ text.innerHTML=document.getElementById("m").value; }); };*/ </script>

body部分，未做CSS定义，效果可实现：

<span class="t1">默认分组</span> <a class="t2">编辑</a> <p>说明：点击编辑，可修改默认分组的文字内容</p>

任意加载一个jQuery插件