我无意间在网上找到了此代码，它已经解决了我的大部分问题，但是我想在此代码中添加一件事，但是我不知道我的问题是什么，在用户之后我如何退出文本框双击它还是在用户完成编辑后？
<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>触发其blur事件时替换<input>的内容: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函数中将其设置为AddInput。请记住，虽然这在Chrome 22中对我有效，但可能需要花费一些额外的精力来测试和修复内联事件和属性分配中可能存在的任何跨浏览器问题。
如果这是我的代码，则可能会使用
addEventListener和getAttribute() / setAttribute()重写“标准”版本，然后使用等效的IE补救路径。或者，只需使用jQuery并让它为您完成所有跨浏览器的工作即可。