По сути, я создаю форму, в которой пользователь нажимает на поле, а метка перемещается в верхнюю часть поля.

Я могу заставить метку двигаться вверх, когда пользователь щелкает по полю, но когда пользователь щелкает по полю, метка не возвращается в эту правильную позицию.

$(".js-form-item").on("click", function() {
  $(this).addClass('form-item--input-filled');
});
.form-item {
  position: relative;
  margin-bottom: 1em;
  transition: color 0.4s ease;
  color: #b4b4aa;
}

.form-item--with-scaling-label label {
  top: 0;
  left: 0;
  position: absolute;
  pointer-events: none;
  transform-origin: 0 0;
  z-index: 1;
  padding: 17px 20px;
  transition: transform 0.2s;
  transition-timing-function: ease-out;
}

.form-item__label {
  display: inline-block;
  font-weight: normal;
  vertical-align: middle;
  color: #b4b4aa;
  padding: 10px 10px 10px 0;
}

.form-text,
.form-email,
.form-password,
.form-number,
.form-select,
.form-tel,
.form-date,
textarea {
  padding: 15px;
  border: 1px solid #d2d2c8;
  background-color: #fff;
  border-radius: 3px;
  background-clip: padding-box;
  width: 100%;
  transition: 0.1s all linear;
}

.form-item--with-scaling-label input,
.form-item--with-scaling-label textarea {
  padding: 21px 20px 10px 20px;
}

.form-item--with-scaling-label.form-item--input-filled label {
  transform: translate3d(5px, -5px, 0) scale3d(0.7, 0.7, 1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-item--with-scaling-label js-form-item form-item form-item-textfield">
  <label for="form-field-label" class="form-item__label font-weight-bold">First name</label>
  <input class="form-text form-item__input" type="text" id="form-field-id" name="form-field-name" value="" size="60" maxlength="128">
</div>

Заранее спасибо за помощь!

Ура

javascript jquery html
1
Danzel91 20 Авг 2018 в 15:19

4 ответа

Лучший ответ

По сути, вы не проверяете, когда метка должна вернуться в положение по умолчанию. Логично, что это было бы, если поле ввода пусто, метка возвращается на свою позицию. Прикрепив прослушиватель событий blur к полю ввода, имеющему класс .form-item__input, мы можем достичь желаемого поведения. Так что проверьте это:

$(".js-form-item").on("click", function () {
    $(this).addClass('form-item--input-filled');
});
$(".form-item__input").on("blur", function () {
    if($(this).val() === '') {
        $(this).parent('.js-form-item').removeClass('form-item--input-filled');
    }
});
.form-item {
    position: relative;
    margin-bottom: 1em;
    transition: color 0.4s ease;
    color: #b4b4aa;
}

.form-item--with-scaling-label label {
    top: 0;
    left: 0;
    position: absolute;
    pointer-events: none;
    transform-origin: 0 0;
    z-index: 1;
    padding: 17px 20px;
    transition: transform 0.2s;
    transition-timing-function: ease-out;
}

.form-item__label {
    display: inline-block;
    font-weight: normal;
    vertical-align: middle;
    color: #b4b4aa;
    padding: 10px 10px 10px 0;
}

.form-text, .form-email, .form-password, .form-number, .form-select, .form-tel, .form-date, textarea {
    padding: 15px;
    border: 1px solid #d2d2c8;
    background-color: #fff;
    border-radius: 3px;
    background-clip: padding-box;
    width: 100%;
    transition: 0.1s all linear;
}

.form-item--with-scaling-label input, .form-item--with-scaling-label textarea {
    padding: 21px 20px 10px 20px;
}

.form-item--with-scaling-label.form-item--input-filled label {
    transform: translate3d(5px,-5px,0) scale3d(0.7,0.7,1);
}
<div class="form-item--with-scaling-label js-form-item form-item form-item-textfield">
    <label for="form-field-label" class="form-item__label font-weight-bold">First name</label>
    <input class="form-text form-item__input" type="text" id="form-field-id" name="form-field-name" value="" size="60" maxlength="128">
</div>
<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>

Метка вернется к своей позиции по умолчанию, только если поле ввода пустое, поэтому, если поле ввода имеет какое-либо значение, метка останется сверху.

0
ths 20 Авг 2018 в 14:20

В вашем случае, я думаю, вам не нужно отслеживать щелчок за пределами элемента, потому что вам нужно событие, когда ваш ввод теряет фокус. Для этого вы можете добавить .blur() слушатель к своему input и удалить класс, который вы добавили ранее.

https://api.jquery.com/blur/

0
Max Martynov 20 Авг 2018 в 12:26

Ваш код в порядке, только измените его следующим образом. Это будет работать стильно! просто и коротко:

$(".js-form-item").on("click", function() { $(this).addClass('form-item--input-filled'); })//exactly your code
.on("focusout",
    function(){
        $(this).removeClass('form-item--input-filled');
    }
);

Дополнительные описания:

Я использовал событие focusout, которое всегда работает нормально. Я проверил его на своем мобильном телефоне, и все в порядке.

0
Hassan Sadeghi 20 Авг 2018 в 14:49

Используйте .blur() , и это решит ваши вопрос .

$(".js-form-item").on("click", function() {
  $(this).addClass('form-item--input-filled');
});

$(".js-form-item > input").on("blur", function() {
  $(this).parent().removeClass('form-item--input-filled');
});
.form-item {
  position: relative;
  margin-bottom: 1em;
  transition: color 0.4s ease;
  color: #b4b4aa;
}

.form-item--with-scaling-label label {
  top: 0;
  left: 0;
  position: absolute;
  pointer-events: none;
  transform-origin: 0 0;
  z-index: 1;
  padding: 17px 20px;
  transition: transform 0.2s;
  transition-timing-function: ease-out;
}

.form-item__label {
  display: inline-block;
  font-weight: normal;
  vertical-align: middle;
  color: #b4b4aa;
  padding: 10px 10px 10px 0;
}

.form-text,
.form-email,
.form-password,
.form-number,
.form-select,
.form-tel,
.form-date,
textarea {
  padding: 15px;
  border: 1px solid #d2d2c8;
  background-color: #fff;
  border-radius: 3px;
  background-clip: padding-box;
  width: 100%;
  transition: 0.1s all linear;
}

.form-item--with-scaling-label input,
.form-item--with-scaling-label textarea {
  padding: 21px 20px 10px 20px;
}

.form-item--with-scaling-label.form-item--input-filled label {
  transform: translate3d(5px, -5px, 0) scale3d(0.7, 0.7, 1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-item--with-scaling-label js-form-item form-item form-item-textfield">
  <label for="form-field-label" class="form-item__label font-weight-bold">First name</label>
  <input class="form-text form-item__input" type="text" id="form-field-id" name="form-field-name" value="" size="60" maxlength="128">
</div>

Но, по моему мнению, вы должны использовать .focus() вместо своего {{X1 }} функция 

$(".js-form-item > input").on("focus", function() {
  $(this).parent().addClass('form-item--input-filled');
});

$(".js-form-item > input").on("blur", function() {
  $(this).parent().removeClass('form-item--input-filled');
});
.form-item {
  position: relative;
  margin-bottom: 1em;
  transition: color 0.4s ease;
  color: #b4b4aa;
}

.form-item--with-scaling-label label {
  top: 0;
  left: 0;
  position: absolute;
  pointer-events: none;
  transform-origin: 0 0;
  z-index: 1;
  padding: 17px 20px;
  transition: transform 0.2s;
  transition-timing-function: ease-out;
}

.form-item__label {
  display: inline-block;
  font-weight: normal;
  vertical-align: middle;
  color: #b4b4aa;
  padding: 10px 10px 10px 0;
}

.form-text,
.form-email,
.form-password,
.form-number,
.form-select,
.form-tel,
.form-date,
textarea {
  padding: 15px;
  border: 1px solid #d2d2c8;
  background-color: #fff;
  border-radius: 3px;
  background-clip: padding-box;
  width: 100%;
  transition: 0.1s all linear;
}

.form-item--with-scaling-label input,
.form-item--with-scaling-label textarea {
  padding: 21px 20px 10px 20px;
}

.form-item--with-scaling-label.form-item--input-filled label {
  transform: translate3d(5px, -5px, 0) scale3d(0.7, 0.7, 1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-item--with-scaling-label js-form-item form-item form-item-textfield">
  <label for="form-field-label" class="form-item__label font-weight-bold">First name</label>
  <input class="form-text form-item__input" type="text" id="form-field-id" name="form-field-name" value="" size="60" maxlength="128">
</div>

Надеюсь, это решило вашу проблему.

0
weBBer 20 Авг 2018 в 12:51
51930617

Похожие вопросы

25 Получить поля ввода формы с помощью jQuery?
24 HTML-кодировка теряется при чтении атрибута из поля ввода
21 Выделение всего текста в текстовом вводе HTML при нажатии
5 Textarea слишком велико для страницы?
💵 Получи $100 на хостинг на 60 дней.
Регистрируйся!

Новые вопросы

2 Объединить два многомерных массива в vuejs или javascript
3 Манипуляция экспресс-ответом для отправки строки клиенту
4 Как обновить объект данными из другого объекта, вложенного в массив?
2 Как контролировать интервал времени между запуском события колесика мыши
2 Получите текущий год, а также список лет с 1901 по текущий год
3 Как убрать оповещение через 5 секунд в React JS?
3 Javascript undefined
3 Как преобразовать массив массивов в массив объектов, выбрав ключ из другого массива?
2 Объединить похожие объекты по ключу в массиве
3 Вставить строку, разделенную запятыми, в новое свойство объекта
Все вопросы по теме javascript >

javascript

Для вопросов, касающихся программирования в ECMAScript (JavaScript / JS) и его различных диалектах / реализациях (исключая ActionScript). Этот тег редко используется отдельно, но чаще всего ассоциируется с тегами [node.js], [jquery], [json] и [html].

Подробнее про javascript...