简单jQuery覆盖标签替代方案

Posted 2021-02-25

Focus and keypress events determine when to hide, show, or dim a label.

Use in tandem with the following html/CSS:


HTML
----

<li>
First Name

</li>


CSS
----


li {
position: relative;
}

label {
position: absolute;
top: 1px;
left: 1px;
cursor: text;
}

$(document).ready(function() {
 
	$('input[type=text]').focusin(function () {
		$(this).prev('label').css('color','#999');
	});
 
	$('input[type=text]').focusout(function () {
		$(this).prev('label').css('color','#111');
	});
 
	$('input[type=text]').keydown(function () {
		if($(this).attr('value') == '') {
			$(this).prev('label').hide();
		}
	});
 
	$('input[type=text]').keyup(function () {
		if ($(this).attr('value') == '') {
			$(this).prev('label').show();
			$(this).prev('label').css('color','#999');
		}
	});
 
});