Double Click Edit Paragraphs

by Samyoul

HTML

<form>
    <table>
        <tr>
            <td class="inputReveal">
                <p>Hello</p>
                <input class="inputter" type="text" style="display:none;" value="Hello"/>
            </td>
            <td class="inputReveal">
                <p>World</p>
                <input class="inputter" type="text" style="display:none;" value="World"/>
            </td>
        </tr>
    </table>
</form>

CSS

table { border-collapse: collapse; }
table, table td { border:1px solid #000 ; }
input{
    border:0px;
    display:block;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
  -webkit-margin-start: 0px;
  -webkit-margin-end: 0px;
    font-family:arial;
    font-size:20px;
    width:auto;
}
input:focus{border:0px;}
p{font-family:arial;font-size:20px;padding:1px 0px;}

JavaScript

$(document).on( "dblclick", ".inputReveal", function(){
    var p = $(this).find('p');
    p.hide();
    $(this).find('input').show().val(p.text()).select();;
});

$(document).on( "focusout", ".inputter", function(){
    var input = $(this);
   input.hide();
    $(this).parent().find('p').show().text(input.val());
});

$.fn.textWidth = function(text, font) {
    if (!$.fn.textWidth.fakeEl) $.fn.textWidth.fakeEl = $('<span>').hide().appendTo(document.body);
    $.fn.textWidth.fakeEl.text(text || this.val() || this.text()).css('font', font || this.css('font'));
    return $.fn.textWidth.fakeEl.width(); 
};

resize = function(element){
    var padding = 0; //Works as a minimum width
    var valWidth = ($(element).textWidth() + padding) + 'px';
    $(element).css('width', valWidth);
}

$( document ).ready(function() {
    $( "input.inputter" ).each(function() {
        resize(this);
    });
});

$(document).on('input', 'input.inputter', function() {
    resize(this);
});