我意外地在网上找到了这段代码，它解决了我的大部分问题，但是我想在这段代码中添加一件事，但我不知道我的问题是什么，如何在用户后退出文本框双击它还是在用户完成编辑之后？
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<script type="text/javascript">
/*<![CDATA[*/
function INPUT(id){
var obj=document.getElementById(id),tds=obj.getElementsByTagName('TD'),z0=0,ip,html;
for (;z0<tds.length;z0++){
tds[z0].onmouseup=function(){ AddInput(this); }
}
}
function AddInput(td){
var ip=zxcAddField('INPUT','text','');
ip.value=td.innerHTML;
td.innerHTML='';
td.appendChild(ip);
td.onmouseup=null;
}
function zxcAddField(nn,type,nme){
var obj;
try {
obj=document.createElement('<'+nn+' name="'+(nme||'')+'" '+(type?'type="'+type+'" ':'')+' >');
}
catch(error){
obj=document.createElement(nn);
if (type){
obj.type=type;
}
obj.name=nme||'';
}
return obj;
}
/*]]>*/
</script>
<script type="text/javascript">
/*<![CDATA[*/
function Init(){
INPUT('tst');
}
if (window.addEventListener){
window.addEventListener('load',Init, false);
}
else if (window.attachEvent){
window.attachEvent('onload',Init);
}
/*]]>*/
</script>
</head>
<body>
<table id="tst" border="1">
<tr width="200">
<td>some html</td>
</tr>
</table>
</body>
</html>
一、修改AddInput为了设置一个监听器blur事件，当相关元素以外的其他元素收到点击时，该事件将触发：
function AddInput(td){
var ip=zxcAddField('INPUT','text','');
ip.value=td.innerHTML;
ip.onblur = function () { removeInput(ip); };
td.innerHTML='';
td.appendChild(ip);
td.onmouseup=null;
}
然后，您可以添加新的removeInput函数，它将取代<td>的内容，当<input>发射它的blur event:
function removeInput(input) {
var val = input.value;
var td = input.parentNode;
td.removeChild(td.lastChild);
td.innerHTML = val;
td.onmouseup = function () { AddInput(td); };
}
该函数还重新分配一个mouseup事件监听器，因为它被设置为null in the AddInput功能。
请记住，虽然这在 Chrome 22 中对我有用，但可能需要一些额外的努力来测试和修复内联事件和属性分配可能存在的任何跨浏览器问题。
如果这是我的代码，我可能会使用重写“标准”版本addEventListener and getAttribute() / setAttribute()，然后使用其等效项创建仅适用于 IE 的补救路径。或者，只使用 jQuery，让它为您完成所有跨浏览器的工作。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
