ros*_*nne 5 javascript textbox exit-code
我不小心在网上发现了这个代码并且它已经解决了我的大部分问题,但有一件事我想添加到这段代码但我不知道我的问题是怎样的,我怎么能在用户之后退出文本框双击它还是在用户完成编辑后？
<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>
小智 2
首先，进行修改AddInput以设置模糊事件的侦听器，当相关元素以外的其他元素收到点击时，该侦听器将触发：
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>
function removeInput(input) {
var val = input.value;
var td = input.parentNode;
td.removeChild(td.lastChild);
td.innerHTML = val;
td.onmouseup = function () { AddInput(td); };
}
此函数还重新分配mouseupnull事件侦听器，因为它在函数中设置为AddInput。
请记住，虽然这在 Chrome 22 中对我有用，但可能需要一些额外的努力来测试和修复内联事件和属性分配可能存在的任何跨浏览器问题。
如果这是我的代码，我可能会使用addEventListener和getAttribute()/重写“标准”版本setAttribute()，然后使用其等效项创建仅用于补救的 IE 路径。或者，只使用 jQuery，让它为您完成所有跨浏览器的工作。