how to exit text box after clicking outside the cell

Question

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

Answer 1

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.