Golang React JS Technology Blog

Edit the text of label on click using jQuery

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 convert string variable in boolean using Regex Example to take user input and display on screen using JavaScript jQuery move multi select values from one to another multi select list How can I redirect the user from one page to another using jQuery or pure JavaScript? What's the difference between let and var? How to show hide option list items using jQuery? How to scroll page to particular Div on click using jQuery? JavaScript HTML5 Validation for name and email field ES6 method of declaration multiple variables in one line JavaScript check if first string contains all characters of second string