0

Написал так: когда начинаешь печатать в input появляется span, но дело в том, что если потом стереть то, что написал, то этот span остаётся, а надо чтобы скрывался. Написал условие внутри функции, но что-то не срабатывает, span вообще не появляется.

$('label.form-group').keyup(function() {
  $(this).children('span:first-child').show();

  if ($('label.form-group input').value === '' || $('label.form-group input').value === this.defaultValue) {
    $('label.form-group>span:first-child').hide();
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="form-group">
    <span>×</span>
    <input class="form-control validate" id="email" type="text" required>
</label>

3 ответа 3

2

$('label.form-group input').value будет возвращать undefined. В jQuery для получения значения нужно использовать метод val. Вам видимо нужно что-то подобное, если я правильно понял:

$('label.form-group').keyup(function () {
	$(this).children('span:first-child').show();

	if ($('label.form-group input').val().trim() === '' || $('label.form-group input').val().trim() === this.defaultValue) {
	  $('label.form-group>span:first-child').hide();
	}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<label class="form-group">
    <span style="display:none">×</span>
    <input class="form-control validate" id="email" type="text" required>
</label>

Для изучения:

  1. .val()
  2. jQuery.trim() - думаю тоже будет полезно
1

В jquery используется val() вместо value;

this.defaultValue$(this).defaultValue;

Ну и я бы все-таки вешал обработчик события на инпут, а не на лейбл, мало ли как там с разметкой потом будет.

$('.form-control').keyup(function() {
  $(this).prev().show();

  if ($(this).val() === '' || $(this).val() === $(this).defaultValue) {
    $(this).prev().hide();
  }
});
label.form-group span {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="form-group">
    <span>×</span>
    <input class="form-control validate" id="email" type="text" required>
</label>

0

Пример ответа , отслеживаю событие change javascript:

$("#email").on("change", function () {

    var parent  = $(this).parent()[0],
            yourSpan = $(parent).find("span")[0];

    if ($(this).val() == "") {
    $(yourSpan).hide();
  } else {
        $(yourSpan).show();
    }
})

И HTML:

<label class="form-group">
    <span>×</span>
    <input class="form-control validate" id="email" type="text" required>
</label>

Ваш ответ

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

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