Faux input area

by shriek

HTML

<a href="javascript:void(0);" class="enable-edit">Edit</a>
Name: <input type="text" name="name" class="stealth uneditable" value="Martin The MAN" disabled="true">

CSS

.uneditable{
    border:0;
    background:white;
    color: black;
}
.editable{
    border:1px solid #ccc;
    background:#cfcfcf;
}

JavaScript

$(document).on("click",".enable-edit",function(){
    $(".uneditable").addClass("editable");
    $(".uneditable").removeAttr("disabled");
    $(".uneditable").removeClass("uneditable");
});
$(document).on("focusout",".stealth",function(){
    $(this).addClass("uneditable");
    $(this).removeClass("editable");
    $(this).attr("disabled",true);
});