5

我不小心在网上找到了这段代码，它解决了我的大部分问题，但是我想在这段代码中添加一件事，但我不知道我的问题是什么，如何在用户之后退出文本框双击它还是在用户完成编辑后？ 

    <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>
4

1 回答 1

2

首先，修改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;
}

然后，您可以添加一个新函数，该函数将在触发其blur事件时removeInput替换<td>'s 的内容：<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，让它为您完成所有跨浏览器的工作。

于 2012-10-22T06:48:39.190 回答