Как сделать так чтобы при пустом input определённый элемент скрывался?

339

07 июня 2017, 03:33

Написал так: когда начинаешь печатать в 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>

Answer 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>

Answer 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>

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

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

Answer 3

Пример ответа , отслеживаю событие 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>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

MS EDGE, MS IE не понимает размытие filter: blur

Как мне им дать понять что блок нужно мылить? Или никак? Только канвас?

402

CSS

Не добавляется сss свойство через jquery

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

367

CSS

аналог background-attachment : fixed

background-attachment : fixed каждый раз при прокрутке вызывает операцию перерисовки что вызывает очень сильные тормоза и лагиМне нужен аналог этого...

527

MySQL

Авторизация в android приложении и веб-сокеты [требует правки]

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

331