Не нравятся результаты поиска? Попробуйте другой поиск!

DLE FAQ » Все вопросы » Стили (CSS) » Как поправить JS для корректной работы input поля?

Как поправить JS для корректной работы input поля?

enterlive 03.02.2015 Стили (CSS), jQuery 2606

вопрос

Автоматически заполоненное поле fieldset input через сохраненный логин работает некорректно.
Текст заполненного поля выходит поверх текста подсказки поля.
При заполненном поле тест подсказки должен быть сверху.
Ссылка на скрипт
Наверно нужно что то дописать сюда:


<script type="text/javascript">
$('input').on('blur', function(){
  if( !$(this).val() == "" ){
    $(this).next().addClass('stay');
  } else {
    $(this).next().removeClass('stay');
  }
});
</script>

Скрин с проблемой прикрепил.

Как поправить JS для корректной работы input поля?

Ответа пока нет

15 комментариев

Юзер

enterlive - 2015-05-143 февраля 2015 20:57 - #40512

ребята помогите пожалуйста, очень надо, я в JS ноль =(
Там по любому две-три строки кода...

Юзер

1599

FastFud - 2015-05-143 февраля 2015 21:08 - #40516

Может проблема не в скрипте а в css ?)

Юзер

enterlive - 2015-05-143 февраля 2015 22:21 - #40519

Цитата: FastFud

Может проблема не в скрипте а в css ?)

Тут в скрипте дело, потому что указывается при input-e что подсказку-текст нужно сдвинуть вверх. А когда введено значение автоматически, то скрипт не определяет и подсказку не сдвигает. Нужно чтобы скрипт определил, что текст уже заполнено внутри и сдвинулся вверх. CSS этого не сотворит.

Юзер

enterlive - 2015-05-143 февраля 2015 22:29 - #40520

Должно быть вот как:

Юзер

1599

FastFud - 2015-05-143 февраля 2015 22:37 - #40521

За анимацию отвечает класс в css, функция на jQuery добавляет и удаляет лишь этот класс.

Юзер

enterlive - 2015-05-143 февраля 2015 22:57 - #40522

Цитата: FastFud

За анимацию отвечает класс в css, функция на jQuery добавляет и удаляет лишь этот класс.

При чем здесь анимация? Анимация работает как в ссылке которую я скинул. Только когда сохранен в браузере логин и пароль, отображается некорректно. Это поправить в CSS невозможно! Если конечно не применить магию...

Юзер

enterlive - 2015-05-143 февраля 2015 23:00 - #40523

Чтобы понять было проще

Юзер

1599

FastFud - 2015-05-143 февраля 2015 23:19 - #40525

Попробуйте так:

$('input').each(function(){
  var inp = $(this),
      id = inp.attr('id');
  if (inp.val()) {
    $('[for='+id+']').addClass('stay');
  } else {
    inp.on('blur', function(){
    if( !$(this).val() == "" ){
      $(this).next().addClass('stay');
    } else {
      $(this).next().removeClass('stay');
    }
  });
  }
});

Юзер

enterlive - 2015-05-143 февраля 2015 23:25 - #40526

Цитата: FastFud

Попробуйте так:

нет, не работает

Юзер

blacksand - 2015-05-144 февраля 2015 07:58 - #40530

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

Юзер

1599

FastFud - 2015-05-144 февраля 2015 10:23 - #40533

if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
    $(window).load(function(){
        $('input:-webkit-autofill').each(function(){
           var id = $(this).attr('id');
            $('label[for='+id+']').addClass('stay');
        });
    });
}

Юзер

enterlive - 2015-05-144 февраля 2015 22:31 - #40565

Цитата: FastFud

if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
    $(window).load(function(){
        $('input:-webkit-autofill').each(function(){
           var id = $(this).attr('id');
            $('label[for='+id+']').addClass('stay');
        });
    });
}

Вав!!! Большое спасибо!!! Работает =) Только это будет работать под Chrome, или на всех браузерах?

Юзер

1599

FastFud - 2015-05-144 февраля 2015 22:59 - #40566

Да, в остальных наверное будет работать лишь тогда когда из разработчики поумнеют )

Юзер

enterlive - 2015-05-144 февраля 2015 23:04 - #40568

Цитата: FastFud

Да, в остальных наверное будет работать лишь тогда когда из разработчики поумнеют )

Нужно ставить как ответ на вопрос в теме =)
Кстати если выполнил вход и потом выход ошибка повторяется. Только когда страница обновляется то снова работает скрипт. Как повторить эту функцию снова после выхода?

Юзер

enterlive - 2015-05-144 февраля 2015 22:59 - #40567

ДЕЛЕТЕД