Как сменить положение формы для ввода и лейбла при наличии хотя бы одного введенного знака в форме?

Question

[istasiik]

Использую вот это решение: https://github.com/maman/JVFloat.js/tree/master При начале ввода там над полем ввода появляются лейблы с текстом из плейсхолдера. Как сделать так, что бы при наличии хотя бы одного введенного знака в форме эта самая форма вместе с лейблом съезжала чуть ниже? Весь код можете увидеть в гитхабе.

Answer 1

[Родион Мещеряков]

Если я правильно понял цель, то вот так:

$('body').on('keyup', '.jvFloat .form-control', function () {
  var $self = $(this),
      offset;

  offset = ($self.val().length > 0) ? 10 : 0;

  $self.closest('.jvFloat').css({ top: offset });
});

Вместо 10 поставьте ваше число.

Comments

[istasiik]

К сожалению, не сработало. Я дописал этот код в конец JVFloat.js

[Родион Мещеряков]

Надо видеть конкретную реализацию.
Я проверял на их демо.

[istasiik]

@rodionme взгляните, пожалуйста. Тут не работают лейблы, просто что бы вы взглянули на сам код. Я буду очень благодарен. jsfiddle.net/5x3saLk6

[Родион Мещеряков]

Взглянул.

Так работает как надо?
jsfiddle.net/5x3saLk6/7

Я перенес скрипты из html в js и добавил свои скрипты (начиная со 118 строки). Также добавил один стиль в конец css (397 строка).

Смещение задается изменение переменной OFFSET (122 строка).

[istasiik]

@rodionme Спасибо вам огромное за помощь! Можно сделать анимацию опускания плавной?

[Родион Мещеряков]

Да, конечно.

Добавьте в css:

.forms-block {
    -webkit-transition: top .3s ease;
-webkit-transition: top .3s ease;
}

[Родион Мещеряков]

Случайно нажал отправить..

.forms-block {
    -webkit-transition: top .3s ease;
    transition: top .3s ease;
}

[istasiik]

@rodionme Спасибо! Только одна мелочь: когда вводишь в форму первый раз - она опускается резко. Если удалить и сделать заново - опускание уже плавное. С чем это может быть связано?

[Родион Мещеряков]

Угу. Связано с тем, что пытаемся анимировать свойство top, а оно создается только после отработки скрипта.

Решение - добавить начальное значение этого свойства в стили:

.forms-block {
    top: 0;
}

[istasiik]

@rodionme В точку! Благодарю!