how to exit text box after clicking outside the cell

I accidentally found this code on the web and it has solved most of my problem, however there is one thing that i want to add to this code but i don't know how my question is, how can i exit the textbox after a user has double clicked it or after the user has finished editing it?

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

First, modify AddInput in order to set a listener for the blur event, which will fire when something other than the element in question receives a click:

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

Then, you can add a new removeInput function, which will replace the <td>'s content when the <input> fires its blur event:

function removeInput(input) {
    var val = input.value;
    var td = input.parentNode;
    td.removeChild(td.lastChild);
    td.innerHTML = val;
    td.onmouseup = function () { AddInput(td); };
}

This function also reassigns a mouseup event listener, since it gets set to null in the AddInput function.

Keep in mind that while this worked for me in Chrome 22, it will probably require a bit of extra effort to test and fix whatever cross-browser issues might exist with inline event and attribute assignments.

If it were my code, I'd probably rewrite the 'standard' version using addEventListener and getAttribute() / setAttribute(), and then make a remedial IE-only path using its equivalents. Or, just use jQuery and let it do all the cross-browser stuff for you.

来源：https://stackoverflow.com/questions/13004833/how-to-exit-text-box-after-clicking-outside-the-cell

标签

javascript

textbox

exit-code