how to exit text box after clicking outside the cell

exit-code, javascript, textbox

Solution

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.

Problem

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

Original source