решил сделать плагин что-то на подобии 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;
} |
работает как и хотел, но фишка в том, что когда потыкаешь на все инпуты, если снова нажать на один из инпутов, то код не сработает, плагин сработает только один раз для каждого элемента, как это можно исправить?
в качестве селектора любой предок ... если инпут заполнили Placeholder не показывается ...
