0

Подсказка в инпуте работает при фокусе, однако, когда ввожу данные и инпут теряет фокус, то на введенные данные наезжает подсказка. Как решить данную проблему, подскажите или покажите.

.form-group {
  margin-bottom: 20px;
  position: relative;
  display: block;
}

.form-control {
  width: 100%;
  height: 80px;
  padding: 0 32px 2px;
  border: 1px solid #e5e5e5;
  font-size: 16px;
  display: block;
  border-radius: 3px;
  background-color: #ffffff;
  color: #505b6a;
  transition: all .3s ease;
  box-sizing: border-box;
}

.ui-input-placeholder {
  position: absolute;
  z-index: 5;
  top: 32px;
  left: 46px;
  color: #b0aaaa;
  font-size: 16px;
  pointer-events: none;
  transition: top 0.3s ease;
}

.ui-input-placeholder::before {
  content: '*';
  position: absolute;
  top: -6px;
  left: -15px;
  color: #df4a4a;
  line-height: 1;
  font-size: 23px;
  z-index: 10;
}

.form-control {
  width: 100%;
  height: 80px;
  padding: 0 32px 2px;
  border: 1px solid #e5e5e5;
  font-size: 16px;
  display: block;
  border-radius: 3px;
  background-color: #ffffff;
  color: #505b6a;
  transition: all .3s ease;
  font-weight: normal;
  font-family: "Roboto-Light", sans-serif;
}

.form-control:focus {
  padding-top: 30px;
}

.form-control:focus+.ui-input-placeholder {
  top: 19px;
}

.required-field .form-control {
  padding-left: 45px;
  z-index: 5;
  position: relative;
  background-color: transparent;
}

.required-field .form-control:focus+.ui-input-placeholder::before {
  top: -5px;
}
<label class="form-group required-field">
    <input type="text" class="form-control">
    <span class="ui-input-placeholder">Регион использования</span>
</label>

2 ответа 2

2

Можно попробовать через псевдокласс :valid на чистом css + html

.form-group {
  margin-bottom: 20px;
  position: relative;
  display: block;
}

.form-control {
  width: 100%;
  height: 80px;
  padding: 0 32px 2px;
  border: 1px solid #e5e5e5;
  font-size: 16px;
  display: block;
  border-radius: 3px;
  background-color: #ffffff;
  color: #505b6a;
  transition: all .3s ease;
  box-sizing: border-box;
}

.ui-input-placeholder {
  position: absolute;
  z-index: 5;
  top: 32px;
  left: 46px;
  color: #b0aaaa;
  font-size: 16px;
  pointer-events: none;
  transition: top 0.3s ease;
}

.ui-input-placeholder::before {
  content: '*';
  position: absolute;
  top: -6px;
  left: -15px;
  color: #df4a4a;
  line-height: 1;
  font-size: 23px;
  z-index: 10;
}

.form-control {
  width: 100%;
  height: 80px;
  padding: 0 32px 2px;
  border: 1px solid #e5e5e5;
  font-size: 16px;
  display: block;
  border-radius: 3px;
  background-color: #ffffff;
  color: #505b6a;
  transition: all .3s ease;
  font-weight: normal;
  font-family: "Roboto-Light", sans-serif;
}

.form-control:focus,
.form-control:valid {
  padding-top: 30px;
}

.form-control:focus+.ui-input-placeholder,
.form-control:valid+.ui-input-placeholder {
  top: 19px;
}

.required-field .form-control {
  padding-left: 45px;
  z-index: 5;
  position: relative;
  background-color: transparent;
}

.required-field .form-control:focus+.ui-input-placeholder::before {
  top: -5px;
}
<label class="form-group required-field">
    <input type="text" class="form-control" required="required">
    <span class="ui-input-placeholder">Регион использования</span>
</label>

Eng версия https://stackoverflow.com/a/11209779/5441700

1

Можно проверять если в инпуте есть текст, тогда оставляем его 'в фокусе'

$('.form-control').focusout(function(){
  if ($(this).val()) {
    $(this).trigger('focus');
  }
});
.form-group {
  margin-bottom: 20px;
  position: relative;
  display: block;
}

.form-control {
  width: 100%;
  height: 80px;
  padding: 0 32px 2px;
  border: 1px solid #e5e5e5;
  font-size: 16px;
  display: block;
  border-radius: 3px;
  background-color: #ffffff;
  color: #505b6a;
  transition: all .3s ease;
  box-sizing: border-box;
}

.ui-input-placeholder {
  position: absolute;
  z-index: 5;
  top: 32px;
  left: 46px;
  color: #b0aaaa;
  font-size: 16px;
  pointer-events: none;
  transition: top 0.3s ease;
}

.ui-input-placeholder::before {
  content: '*';
  position: absolute;
  top: -6px;
  left: -15px;
  color: #df4a4a;
  line-height: 1;
  font-size: 23px;
  z-index: 10;
}

.form-control {
  width: 100%;
  height: 80px;
  padding: 0 32px 2px;
  border: 1px solid #e5e5e5;
  font-size: 16px;
  display: block;
  border-radius: 3px;
  background-color: #ffffff;
  color: #505b6a;
  transition: all .3s ease;
  font-weight: normal;
  font-family: "Roboto-Light", sans-serif;
}

.form-control:focus {
  padding-top: 30px;
}

.form-control:focus+.ui-input-placeholder {
  top: 19px;
}

.required-field .form-control {
  padding-left: 45px;
  z-index: 5;
  position: relative;
  background-color: transparent;
}

.required-field .form-control:focus+.ui-input-placeholder::before {
  top: -5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="form-group required-field">
    <input type="text" class="form-control">
    <span class="ui-input-placeholder">Регион использования</span>
</label>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.