点击使文字变文本框且可编辑的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插件

点击使文字变文本框且可编辑的JS,古老的榕树,5-wow.com