Fake Editable

by SebastianPataneMasuelli

HTML

<label>Title</label>
<input type="text" class="editable" value="Business VoIP Buyers Guide">   
<br />
<label>Title</label>
<input type="text" class="editable" value="fdsa Buyers Guide">   

<br /><br />

     <input class="form_controls" type="submit" value="Save" style="display:none">
    <input class="form_controls" type="submit" value="cancel" style="display:none">

CSS

input {
   width: 300px; 
}

.editable {
    border: 0;
}

.editable_hover {
    border: 2px solid gray;
}

.editable:focus {
    border: 1px solid gray;
}

.form_controls {
 width: 100px;   
}

JavaScript

//common js
$(".editable").hover(function() {
  $(this).addClass("editable_hover");
}, function() {
    $(this).removeClass("editable_hover");
});

// Common js
$(".editable").blur(function() {
    $(this).addClass("editable_hover");
    //$(".form_controls").show();
});

//page specific js
$(".editable").blur(function() {
    //$(this).addClass("editable_hover");
    $(".form_controls").show();
});