How to make div appear when input.value > 0 and hide it when it's 0?

Question

I'm trying to make a div appear whenever the input contains at least 1 character and hide it whenever the input is empty. However, I just can't get it to work no matter what I do.

Here is my first attempt:

var input = document.getElementById('search');
    input.addEventListener('keypress', function(e) {

        var searchHits = document.getElementById('search-hits');

        if (e.keyCode >= 48 && e.keyCode <= 90) {
            searchHits.style.display = 'block';
        }
        else if (e.keyCode === 8 && input.value === '') {
            searchHits.style.display = 'none';    
        }
    });

This doesn't work because a backspace (keyCode 8) key press doesn't actually count as a keypress since it doesn't add a character to the input value.

So then I figured that this solution should work:

var input = document.getElementById('search');
    input.addEventListener('keypress', function(e) {

        var searchHits = document.getElementById('search-hits');

        if (input.value.length >= 0) {
            searchHits.style.display = 'block';
        }
        else {
            searchHits.style.display = 'none';    
        }
    });

But yet again I get the same problem with the backspace not being registred as an actual keypress.. I have no idea how to fix this so that it's working properly. Any ideas?

EDIT: I have also tried changing the 'keypress' to keydown, keyup, input and change. None of them work.

listen to the _input_ event instead of the _keydown_ event. another way is to set document.body.dataset.mode to the value oninput and then use body[data-mode=''] #search-hits {display:none} — dandavis, Nov 05 '14 at 21:02
Possibly duplicate/related: http://stackoverflow.com/questions/4843472/javascript-listener-keypress-doesnt-detect-backspace — elzi, Nov 05 '14 at 21:11
@elzi I have checked a lot of questions related to mine but none of them has worked for me. I have tried keydown, keyup, input, change etc. — Chrillewoodz, Nov 05 '14 at 21:13
Are you sure you're getting valid references to your DOM objects? Make sure that your variables aren't empty. What is your console saying? — , Nov 05 '14 at 21:17
@jedd.ahyoung my variables aren't empty. My console isn't giving me anything. — Chrillewoodz, Nov 05 '14 at 21:22

score 1 · Accepted Answer · answered Nov 05 '14 at 21:17

var input = document.getElementById('search');
    input.addEventListener('keyup', function(e) {

        var searchHits = document.getElementById('search-hits');

        if (input.value.length > 0) {
            searchHits.style.display = 'block';
        }
        if (input.value.length == 0) {
            searchHits.style.display = 'none';    
        }
    });

  <input type="text" id="search">
  
  <div id="search-hits" style="display:none;">
    <li>item 1</li>
    <li>item 2</li>
  </div>

Some discoveries:

'keydown' event will not work without more complex code, since on keydown, the value length is still 1 when the input becomes empty. Whereas keyup will detect it as 0.
Not sure why, but putting the logic into two if blocks, rather than an if/else, was necessary to get it working.

Finally it's working.. I noticed the thing about the keydown as well because when I typed 1 character it would disappear, but then when the input was empty it would come back again which didn't make sense to me. I'll probably look into this more to get a more clear view of it. Thank you so much again. — Chrillewoodz, Nov 05 '14 at 21:27

score 0 · Answer 2 · answered Nov 05 '14 at 21:05

0

Try using the change event.

var searchHits = document.getElementById('search-hits');
var input = document.getElementById('search');

input.addEventListener('change', function(e) {
    if (input.value.length) {
        searchHits.style.display = 'block';
    } else {
        searchHits.style.display = 'none';    
    }
});

This event should fire when the input value changes, and when focus is removed from it.

answered Nov 05 '14 at 21:05

That doesn't even make it appear I'm afraid, my problem is that nothing I do can make the div go away.. – Chrillewoodz Nov 05 '14 at 21:07
The problem is that this doesnt achieve the desired effect of updating the view on keypress. Change is basically focus + blur – elzi Nov 05 '14 at 21:10

How to make div appear when input.value > 0 and hide it when it's 0?

2 Answers2