点击使文字变文本框且可编辑的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,布布扣,bubuko.com

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

上一篇:HTML5学习之FileReader接口


下一篇:Oracle 存储过程