Javascript-форум - в чем проблема?

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - в чем проблема? (https://javascript.ru/forum/jquery/41572-v-chem-problema.html)

в чем проблема?

решил сделать плагин что-то на подобии Placeholder

(function( $ ){
  $.fn.plh = function(){
		var inputField = this.children('div').children('input');
		var label = this.children('div').children('label');
		inputField.focus(function(){
			$(this).prev('label').addClass('hide');
		});
		inputField.blur(function(){
			$(this).prev('label').addClass('show');
		});
  };
})( jQuery );

<html>
	<head>
		<script type = "text/javascript" src = "jquery.js"></script> 
		<script type = "text/javascript" src = "jquery.placeholder.js"></script>
		<link rel="stylesheet" href="style.css"/>
		<script type = "text/javascript">
			$(document).ready(function(){
				$('#plh_form').plh();
			});
		</script>
		
	</head>
	<body>
		<form action="" id = "plh_form">
			<div>
				<label for="name">Name</label>
				<input type="text" id="name">
			</div>
			<div>
				<label for="surname">Surname</label>
				<input type="text" id="surname">
			</div>
			<div>
				<label for="password">Password</label>
				<input type="password" id="password">
			</div>
			<div>
				<label for="city">City</label>
				<input type="text" id="city">
			</div>
		</form>
	</body>
</html>

Код:

form#plh_form div {

        margin: 5px 20px 5px 20px;

        position: relative;

}

form#plh_form div label {

        position: absolute;

        top: 3px;

        left: 6px;

        color: #999999;

}

form#plh_form div input {

        margin-right: 10px;

        width: 150px;

}

.hide{

        visibility: hidden;

}

.show{

        visibility: visible;

}

работает как и хотел, но фишка в том, что когда потыкаешь на все инпуты, если снова нажать на один из инпутов, то код не сработает, плагин сработает только один раз для каждого элемента, как это можно исправить?

bastar,
а где removeClass() ????

Цитата:

Сообщение от bastar

плагин что-то на подобии Placeholder

:write: в качестве селектора любой предок ... если инпут заполнили Placeholder не показывается ...

<!DOCTYPE HTML>
<html>
	<head>
        <meta charset="utf-8">
        <style type="text/css">
        form#plh_form div{margin:5px 20px 5px 20px;position:relative}
        form#plh_form div label{position:absolute;top:3px;left:6px;color:#999}
        form#plh_form div input{margin-right:10px;width:150px}
        </style>
		<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
		<script>
        (function( $ ){
  $.fn.plh = function () {
    return this.each(function () {
        $("label", $(this))
            .each(function (d, c) {
                var b = $(c),
                    a = "#" + b.attr("for"),
                    a = $(a);
                a.focusin(function () {
                    b.hide()
                });
                a.focusout(function () {
                   !a.val() && b.show()
                })
            })
    })
};
})( jQuery );
</script>

		<script type = "text/javascript">
			$(document).ready(function(){
				$('body').plh()
			});
		</script>

	</head>
	<body>
		<form action="" id = "plh_form">
			<div>
				<label for="name">Name</label>
				<input type="text" id="name">
			</div>
			<div>
				<label for="surname">Surname</label>
				<input type="text" id="surname">
			</div>
			<div>
				<label for="password">Password</label>
				<input type="password" id="password">
			</div>
			<div>
				<label for="city">City</label>
				<input type="text" id="city">
			</div>
		</form>
	</body>
</html>

Если полей немного, удобней сделать так: http://jsfiddle.net/rafaylik/7QQUn/3/
Сделал пример для двух полей, но принцип понять можно.