javascript - 如何使div在input.value> 0时显示并在其为0时隐藏它？

我试图使div在输入包含至少1个字符时出现，并在输入为空时将其隐藏。但是，无论做什么，我都无法正常工作。

这是我的第一次尝试：

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';
        }
    });

这是行不通的，因为退格（keyCode 8）按键实际上并未算作按键，因为它不会在输入值中添加字符。

因此，我认为此解决方案应该有效：

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';
        }
    });

但是我又遇到了同样的问题，因为退格没有被注册为实际的按键。.我不知道如何解决这个问题，以使其正常工作。有任何想法吗？

编辑：我也尝试过将'keypress'更改为keydown，keyup，input和change。他们都不工作。

最佳答案

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>

一些发现：


如果没有更复杂的代码，'keydown'事件将无法工作，因为在keydown上，当输入为空时，值长度仍为1。而keyup会将其检测为0。
不知道为什么，但是将逻辑放到两个if块中，而不是一个if / else，才可以使它起作用。

关于javascript - 如何使div在input.value> 0时显示并在其为0时隐藏它？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/26767008/