Editable label
by Sergey Linnick
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<label class="editable-label" style="">Base Rat</label>
<input class="clickedit form-control" type="text" value="Base Rate" style="display: none;">
JavaScript
// Rate table`s editable labels
var defaultText = 'Rate Name';
function endEdit(e) {
var input = $(e.target),
label = input && input.prev();
label.text(input.val() === '' ? defaultText : input.val());
console.log(input.value);
input.hide();
label.show();
}
$('.clickedit').hide()
.focusout(endEdit)
.keyup(function(e) {
if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {
endEdit(e);
console.log(input);
return false;
} else {
return true;
}
})
.prev().click(function() {
$(this).hide();
$(this).next().show().focus();
});