Убирать input и сохранять значение в td js

Есть таблица

<table>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

При нажатии на td появляется input с его координатами, как сделать так что бы после ввода других значений input удалялся и значение сохранялось, интересует чистый js без jquery.вот js:

   var d = document,
       td = d.getElementsByTagName('td');
       Object.keys(td).map( function(item) {
            var coordinates = td[item].getBoundingClientRect();
                td[item].innerHTML = coordinates.left + coordinates.top + coordinates.right + coordinates.bottom;
           var input = document.createElement('input');
               input.setAttribute('type','text');
               input.value = td[item].innerHTML;

            td[item].addEventListener("click", function(){
                td[item].innerHTML = "";
                td[item].appendChild(input);
           },false);
       });