Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 19.09.2013, 21:45
Новичок на форуме
Отправить личное сообщение для bastar Посмотреть профиль Найти все сообщения от bastar
 
Регистрация: 29.11.2011
Сообщений: 4

в чем проблема?
решил сделать плагин что-то на подобии 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;
}
работает как и хотел, но фишка в том, что когда потыкаешь на все инпуты, если снова нажать на один из инпутов, то код не сработает, плагин сработает только один раз для каждого элемента, как это можно исправить?
Ответить с цитированием
  #2 (permalink)  
Старый 19.09.2013, 22:29
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 28,906

bastar,
а где removeClass() ????
Ответить с цитированием
  #3 (permalink)  
Старый 19.09.2013, 22:46
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 28,906

Сообщение от bastar
плагин что-то на подобии Placeholder
в качестве селектора любой предок ... если инпут заполнили 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>
Ответить с цитированием
  #4 (permalink)  
Старый 20.09.2013, 15:44
Аватар для mi.rafaylik
Кандидат Javascript-наук
Отправить личное сообщение для mi.rafaylik Посмотреть профиль Найти все сообщения от mi.rafaylik
 
Регистрация: 07.12.2012
Сообщений: 113

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

Последний раз редактировалось mi.rafaylik, 26.09.2013 в 18:42.
Ответить с цитированием
Ответ


Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
проблема с autocomplete brainraider jQuery 5 12.05.2011 08:50
Проблема загрузки в ИЕ Sergej AJAX и COMET 0 11.04.2011 08:29
Проблема с выводом контента в топ-панели Slavk0 Общие вопросы Javascript 0 28.03.2011 10:39
Проблема с CSS COKOJIOB (X)HTML/CSS 5 04.08.2009 13:19
проблема с передачей русского текста в Prototype subaru Prototype & script.aculo.us 2 26.07.2007 15:56