如何点击细胞外后退出文本框(how to exit text box after clicking

2019-07-01 16:02发布

我无意中在网上找到了这个代码,它已经解决了大多数我的问题,但是有我想要添加到这个代码的一个东西,但我不知道我的问题是怎么了,我怎么能在用户退出后的文本框中有双点击它,或者用户完成后编辑呢?

    <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事件监听器,因为它被设置为nullAddInput功能。

请记住,虽然这在Chrome 22工作对我来说,它可能会需要一些额外的努力来测试和修复任何跨浏览器的问题,可能与联事件存在和属性分配。

如果是我的代码,我会用大概重写“标准”版addEventListenergetAttribute() / setAttribute()然后让使用它的当量补救IE-唯一路径。 或者,只是使用jQuery,让它做所有的跨浏览器的东西给你。



文章来源: how to exit text box after clicking outside the cell