govo_music » 日志 » 让标签转换为INPUT
让标签转换为INPUT
GOVO 发表于 2006-07-18 00:38:43
本JS基于Prototype.js，能在firefox,IE和Opera上运行，但是还有一些小问题，只是不影响主要功能的实现。主要的问题在下面的注释中
/**
*把目标转为input输入的类
*@author govo
*/
var toInput=Class.create();
toInput.prototype={
initialize:function(element,format,unBack){
this.format=format || "";
this.El=$(element);
this.ELID=this.El.id;
this.unBack=unBack || false;//如果为true，则不把变为INPUT的标签转回原来的
Event.observe(this.El,"dblclick",this.convert.bind(this),false);//如果Event.observe最后一个为true，则无法在Opera中执行
},
convert:function(){
this.tempDiv="<div style=\"display:none\" id=\"_____temp_"+this.ELID+"\"></div>";
this.tempDivID="_____temp_"+this.ELID;
this.input="<input type=\"text\" id=\""+this.ELID+"\" value=\""+this.El.innerHTML+"\" name=\""+this.ELID+"\" "+this.format+" />";
new Insertion.After(this.ELID,this.tempDiv);
Element.remove(this.ELID);
new Insertion.Before(this.tempDivID,this.input);
Element.remove(this.tempDivID);
if(this.unBack) return;
Event.observe(this.ELID,"dblclick",this.unconvert.bind(this),false);
Event.observe(this.ELID,"blur",this.unconvert.bind(this),false);
},
unconvert:function(){
//很奇怪，当unconvert完一次后，在Firefox中有时候会自动执行一次unconvert，所以得进行一次对标签类型的判断。
if($(this.ELID).tagName.toUpperCase()!='INPUT') return;
Event.stopObserving(this.ELID,"blur",this.unconvert.bind(this),false);//另人头痛的Event.stopObserving，我不知道他到底有没有真正的起作用
Event.stopObserving(this.ELID,"dblclick",this.unconvert.bind(this),false);
this.inputNewValue=$(this.ELID).value;
new Insertion.After(this.ELID,this.tempDiv);
Element.remove(this.ELID);
this.tempEl=$(this.tempDivID);
this.tempEl.parentNode.insertBefore(this.El,this.tempEl);
this.El.innerHTML=this.inputNewValue;
Element.remove(this.tempDivID);
},
destroy:function(){
Event.stopObserving(this.El,"dblclick",this.convert.bind(this),false);
Event.stopObserving(this.ELID,"blur",this.unconvert.bind(this),false);
Event.stopObserving(this.ELID,"dblclick",this.unconvert.bind(this),false);
//不明白为何停止了监听，但作用还是在的，也就是说无法通过以上三个语句停止监听，因此下面4行语句被迫被注释掉
//this.format=null;
// this.El=null;
// this.ELID=null;
// this.unBack=null;
}
}
//==========================================================//
建立一个HTML文件，并加入prototype.js以执行它。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript" src="prototype.js"></script>
<script>
//这里加入以上代码
var a,b,c,d;
window.onload=function(){
a=new toInput("1","style='width:200px' maxlength='20'");
b=new toInput("2","",true);
c=new toInput("3");
d=new toInput("4");
showDebug();
}
</script>
</head>
<body>
<div id="edittopic" style="width:200px; height:250px;margin:0 auto">
<div id="1" style="width:200px; height:20px; background-color:#FFECEC">1</div>
<div id="2" style="width:200px; height:20px; background-color:#ECFFF1">2</div>
<div id="3" style="width:200px; height:20px; background-color:#ECF8FF">3</div>
<div id="4" style="width:200px; height:20px; background-color:#FFEEFD">4</div>
<div id="stop" onclick="a.destroy();b.destroy();c.destroy();d.destroy()" style="width:200px; height:20px; background-color:#FF0000">STOP ALL </div>
</div>
</body>
</html>
下载样例和源码
/**
*把目标转为input输入的类
*@author govo
*/
var toInput=Class.create();
toInput.prototype={
initialize:function(element,format,unBack){
this.format=format || "";
this.El=$(element);
this.ELID=this.El.id;
this.unBack=unBack || false;//如果为true，则不把变为INPUT的标签转回原来的
Event.observe(this.El,"dblclick",this.convert.bind(this),false);//如果Event.observe最后一个为true，则无法在Opera中执行
},
convert:function(){
this.tempDiv="<div style=\"display:none\" id=\"_____temp_"+this.ELID+"\"></div>";
this.tempDivID="_____temp_"+this.ELID;
this.input="<input type=\"text\" id=\""+this.ELID+"\" value=\""+this.El.innerHTML+"\" name=\""+this.ELID+"\" "+this.format+" />";
new Insertion.After(this.ELID,this.tempDiv);
Element.remove(this.ELID);
new Insertion.Before(this.tempDivID,this.input);
Element.remove(this.tempDivID);
if(this.unBack) return;
Event.observe(this.ELID,"dblclick",this.unconvert.bind(this),false);
Event.observe(this.ELID,"blur",this.unconvert.bind(this),false);
},
unconvert:function(){
//很奇怪，当unconvert完一次后，在Firefox中有时候会自动执行一次unconvert，所以得进行一次对标签类型的判断。
if($(this.ELID).tagName.toUpperCase()!='INPUT') return;
Event.stopObserving(this.ELID,"blur",this.unconvert.bind(this),false);//另人头痛的Event.stopObserving，我不知道他到底有没有真正的起作用
Event.stopObserving(this.ELID,"dblclick",this.unconvert.bind(this),false);
this.inputNewValue=$(this.ELID).value;
new Insertion.After(this.ELID,this.tempDiv);
Element.remove(this.ELID);
this.tempEl=$(this.tempDivID);
this.tempEl.parentNode.insertBefore(this.El,this.tempEl);
this.El.innerHTML=this.inputNewValue;
Element.remove(this.tempDivID);
},
destroy:function(){
Event.stopObserving(this.El,"dblclick",this.convert.bind(this),false);
Event.stopObserving(this.ELID,"blur",this.unconvert.bind(this),false);
Event.stopObserving(this.ELID,"dblclick",this.unconvert.bind(this),false);
//不明白为何停止了监听，但作用还是在的，也就是说无法通过以上三个语句停止监听，因此下面4行语句被迫被注释掉
//this.format=null;
// this.El=null;
// this.ELID=null;
// this.unBack=null;
}
}
//==========================================================//
建立一个HTML文件，并加入prototype.js以执行它。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript" src="prototype.js"></script>
<script>
//这里加入以上代码
var a,b,c,d;
window.onload=function(){
a=new toInput("1","style='width:200px' maxlength='20'");
b=new toInput("2","",true);
c=new toInput("3");
d=new toInput("4");
showDebug();
}
</script>
</head>
<body>
<div id="edittopic" style="width:200px; height:250px;margin:0 auto">
<div id="1" style="width:200px; height:20px; background-color:#FFECEC">1</div>
<div id="2" style="width:200px; height:20px; background-color:#ECFFF1">2</div>
<div id="3" style="width:200px; height:20px; background-color:#ECF8FF">3</div>
<div id="4" style="width:200px; height:20px; background-color:#FFEEFD">4</div>
<div id="stop" onclick="a.destroy();b.destroy();c.destroy();d.destroy()" style="width:200px; height:20px; background-color:#FF0000">STOP ALL </div>
</div>
</body>
</html>
下载样例和源码
相关日志:
收藏:
QQ书签
del.icio.us
订阅:
Google
抓虾
