Я создал форму, похожую на логин в Твиттере, т.е.<span> содержит метку для каждого <input> ... затем при нажатии клавиши метка анимирует размер шрифта до 0. Это крутой эффект.
Проблема, которую я заметил, заключается весли вы используете автозаполнение формы, только форма, которая инициировала исходное событие нажатия клавиши, правильно анимирует свою метку - другие метки не анимируются должным образом и, таким образом, перекрывают значение ввода.это ... как это компенсировать?Какие события вызываются, когда автозаполнитель формы вводит входные значения, и более конкретно, как бы я использовал их с jQuery?
.,.
Пример формы ниже:
<div class="name">
<input class="name" name="name" type='text' value="<?php echo $name; ?>">
<span>Full Name</span>
</div>
.,.
Пример jQuery ниже:
$(function(){
// On document ready, check form fields
$(':input').each(function() {
if($(this).val() === "") {
$(this).next('span').animate({fontSize:16},'fast');
}
});
// On form focus, adjust colors
$(':input').focus(function() {
$(this).addClass('focus');
$(this).next('span').addClass('focus');
});
// On keypress, remove label
$(':input').keypress(function() {
$(this).next('span').animate({fontSize:0},'fast',function(){
$(this).hide();
});
});
// On form blur, restore colors and label
$(':input').blur(function() {
$(this).removeClass('focus');
$(this).next('span').removeClass('focus');
if($(this).val() == '') {
$(this).next('span').show().animate({fontSize:16},'fast');
}
});
// Pass span 'click' event to input
$('form span').click(function() {
$(this).prev('input').trigger('focus');
});
});