Question

每当输入包含至少1个字符时，我都会尝试显示div，并在输入为空时隐藏它。但是，无论我做什么，我都无法让它工作。

这是我的第一次尝试：

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。他们都没有工作。

Answer 1

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 / else，则将逻辑分成两部分，以使其正常工作。

Answer 2

尝试使用change事件。

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

当输入值发生变化时，以及从中移除焦点时，应触发此事件。

输入时如何使div出现。值＆gt; 0并在它0时隐藏它？

2 个答案: