Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 27.07.2012, 16:56
Аспирант
Отправить личное сообщение для madd1 Посмотреть профиль Найти все сообщения от madd1
 
Регистрация: 26.07.2012
Сообщений: 35

Переход между input, отловить
Здравствуйте.

Появилась следующая задача, когда делал сайт, имеется <div id="mlogin_form"></div>, внутри которого есть 2 input'a, так вот, при фокусе этих инпутов необходимо создавать под формой и анимировать по высоте блок (будто он выплывает), при блюре, соответственно наоборот, заплывает назад. Все просто, если бы не одна тонкость, при переходе между этими инпутами также возникают события фокус и блюр, но при этом наш новый блок должен стоять на месте (надеюсь понятно объяснил).

Я даже решил эту задачу, но решил в лоб, делает вид, что работает, но меня очень беспокоит этот быдло-код с таймерами:
$('#mlogin_form input').focus(function() {
			$('body').append('<div id="login_more"></div>');
			$('#login_more').offset({left: $('#mlogin_form').position().left});
			if (!loginTime) {	
				$('#login_more').css({height: "0px"});
				$('#login_more').animate({height: "35px"}, 200);
			}
			loginTime = false;
});
$('#mlogin_form input').blur(function() {
			loginTime = true;
			$('#login_more').remove();
			setTimeout(function() {
				if (loginTime) {
					$('body').append('<div id="login_more"></div>');
					$('#login_more').offset({left: $('#mlogin_form').position().left});
					$('#login_more').animate({height: "0px"}, 200, function() {
						$('#login_more').remove();
					});
				}
				loginTime = false;
			}, 1);
});


Подскажите, может есть более изящное решение в данной ситуации, а то меня, честно, пугает такой код

Ах, да, булева переменная loginTime - глобальная для этих функций и по-умолчанию false.

Спасибо!

Последний раз редактировалось madd1, 27.07.2012 в 16:58.
Ответить с цитированием
  #2 (permalink)  
Старый 27.07.2012, 17:15
Аватар для vadim5june
Студент
Отправить личное сообщение для vadim5june Посмотреть профиль Найти все сообщения от vadim5june
 
Регистрация: 30.04.2012
Сообщений: 1,113

используйте событие onmousedown на input-ах
Оно возникает раньше чем blur на другом инпуте можно без таймаута обойтись

Последний раз редактировалось vadim5june, 27.07.2012 в 17:17.
Ответить с цитированием
  #3 (permalink)  
Старый 27.07.2012, 17:29
Аспирант
Отправить личное сообщение для madd1 Посмотреть профиль Найти все сообщения от madd1
 
Регистрация: 26.07.2012
Сообщений: 35

Спасибо Прикольно знать такие тонкости.
Рабочее решение, мало ли кому-то надо:
$('#mlogin_form input').focus(function(e) {
			$('body').append('<div id="login_more"></div>');
			$('#login_more').offset({left: $('#mlogin_form').position().left});
			if (!logMenuTime) {
				$('#login_more').css({height: "0px"});
				$('#login_more').animate({height: "35px"}, 200);
			}
			logMenuTime = true;
});
		
$('#mlogin_form input').mousedown(function(e) {
			logMenuTime = false;
});
		
$('#mlogin_form input').blur(function(e) {
			logMenuTime = !logMenuTime;
			if (logMenuTime) {
				$('#login_more').remove();
			}
			else {
				$('#login_more').animate({height: "0px"}, 200, function() {
					$('#login_more').remove();
				});
			}
});
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
При добавлении DOCTYPE "плывут" размеры input type=text Demath (X)HTML/CSS 4 08.07.2012 18:27
Переход между textarea с помощью клав-ры virus-07 Events/DOM/Window 2 15.09.2011 14:35
поле input - переход по клику MailRes Элементы интерфейса 2 30.05.2011 21:55
Как отловить для всего документа переход фокуса между элементами. Nominus umbra Общие вопросы Javascript 2 28.04.2010 01:33
Переход между окнами ввода при заполнении. Бушка Общие вопросы Javascript 4 25.03.2009 14:40