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
How to scroll page to 1000px from top on page load using jQuery?
ES6 method of declaration multiple variables in one line
Generate random password for form field on click using JavaScript
Check if a string ends with the given target string
jQuery example of scroll to top
jQuery get the coordinates of div clicked