Question

我不小心在网上发现了这个代码并且它已经解决了我的大部分问题，但有一件事我想添加到这段代码但我不知道我的问题是怎样的，我怎么能退出文本框用户双击后或用户完成编辑后？

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

Answer 1

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

此函数还会重新分配 mouseup 事件侦听器，因为它在null函数中设置为AddInput。

请注意，虽然这在Chrome 22中对我有用，但可能需要额外的努力来测试和修复内联事件和属性分配可能存在的任何跨浏览器问题。

如果是我的代码，我可能会使用addEventListener和getAttribute() / setAttribute()重写“标准”版本，然后使用其等价物制作一个仅修正IE的路径。或者，只需使用jQuery并让它为您完成所有跨浏览器的操作。

单击单元格外部后如何退出文本框

1 个答案: