Example
<!DOCTYPE html>
<html>
<head>
<style>
label:hover {
background: #f2f5ff;
border-radius:5px;
padding:2px 4px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function($) {
var defaultText = 'Click me and enter some text';
function endEdit(e) {
var input = $(e.target),
label = input && input.prev();
label.text(input.val() === '' ? defaultText : input.val());
input.hide();
label.show();
}
$('.clickedit').hide()
.focusout(endEdit)
.keyup(function (e) {
if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {
endEdit(e);
return false;
} else {
return true;
}
})
.prev().click(function () {
$(this).hide();
$(this).next().show().focus();
});
});
</script>
</head>
<body>
<label class="pull-left">Click me and enter some text</label>
<input class="clickedit" type="text" />
</body>
</html> Most Helpful This Week
JavaScript sort multi dimensional array on specific columns
jQuery example of scroll to top
Highlight and get the details of table row on click using JavaScript
jQuery show input text inside div after on click event
How to set checkbox and radio option checked on load with jQuery?
JavaScript calculate Fahrenheit from Celsius