Как можно отобразить div, когда входные данные имеют значение?

#javascript #jquery

Вопрос:

У меня есть текст для ввода, который и скрывает div.

Я хочу показать div, когда входной текст имеет значение.

Вот демонстрация: http://jsfiddle.net/vyc7N/181 /

 <label for="db">Type whatever</label>
<input type="text"name="amount"  />

<div id="yeah" style="display:none;">
 <input type="submit"   />
</div>

Пожалуйста, кто-нибудь может мне помочь?

1. посмотрите на обработчик событий изменения / ключа

2. jsfiddle.net/P78Wc это можно сделать многими способами, но, по крайней мере, попробуйте некоторые :)

3. jsfiddle.net/arunpjohny/duCJ3/1 — $('input[name="amount"]').bind('keyup change', function(){ $('#yeah').toggle(this.value.length) })

4. Похоже, что ваш вопрос получил несколько отрицательных отзывов из-за очевидного отсутствия исследовательских усилий. Кстати, хороший потерянный аватар Canvas. =]

5. jsfiddle.net/DerekL/vyc7N/185

Ответ №1:

Вы можете написать код в событии ввода текстового поля, чтобы получить длину введенного в него текста.

 $('input[name=amount]').keyup(function(){
  if($(this).val().length)
    $('#yeah').show();
  else
    $('#yeah').hide();
});

Рабочая демонстрация

вы также можете использовать .toggle() вместо использования .show / .hide() :

   $('input[name=amount]').keyup(function(){
     $('#yeah').toggle($(this).val().length);
  });

1. $(this).val() Серьезно??

2. Вы должны привязать оба keyup и change , поскольку keyup не запускается большинством, если не всеми мобильными устройствами.

3. Вам следует прослушать input событие, поскольку оно работает с IMES.

4. Почему люди все еще отвечают с помощью keyup и change в 2014 ..? Нет любви к input событию .

5. Да, если вам не нужна поддержка IE < 9, вы можете использовать input событие.

Ответ №2:

 $('input[name=amount]').bind('keyup change', function(){
if(!$(this).val())
    $("#yeah").css('display', 'none');
else
    $("#yeah").css('display', '');
});

Ответ №3:

Рабочая скрипка

Используйте следующую логику: если после обрезки остается какое-то значение, то покажите, остальное скройте.

 $('input[name=amount]').keyup(function(){
  if($.trim($(this).val())!='')
    $('#yeah').show();
  else
    $('#yeah').hide();
});

Ответ №4:

Это чистый javascript и DOM, без jQuery

Вы могли бы использовать onkeyup() :

 <label>Type whatever</label>
<input id='inptOne' type="text" name="amount" onkeyup="myFunction()" />

<div id="yeah" style="display:none">
    <input type="submit" />
</div>

<script>
//if input has some value will show the button
  window.myFunction = function() {
  //alert('it ran!');
  var hasValue = document.getElementById('inptOne').value;
  if (!!hasValue) {
    document.getElementById('yeah').style.display = 'inline';
  } else {
    document.getElementById('yeah').style.display = 'none';
  };
 };
</script>

Нажмите здесь, чтобы просмотреть jsfiddle

1. По какой-то причине jsfiddle работает неправильно. Это не ошибка codes, это jsfiddle. Если вы используете код иначе, он будет работать. Но я изменил jsfiddle, поэтому он работает на jsfiddle. Код здесь jsfiddle

2. @SandyGood, но подраздел не скрывает, что я стираю то, что я ввел

3. Верно. Вот версия с onkeyup , которая одновременно отображает и скрывает кнопку отправки. Нажмите здесь, чтобы просмотреть jsfiddle