javascript - Js键盘监听

Question

我的目标是当您键入搜索栏时将弹出下面的代码，但我在输入不同的输入时遇到问题，例如评论输入 js 监听并打开搜索栏。是否有可能当我已经在不同的输入字段中时，搜索将不会弹出并显示。

<style>
#searchBar { display: none;    -webkit-transition: width 2s; /* Safari */ transition: width 2s;}
.search { width: 250px; height: 20px; }
</style>

<script>
window.onload = function() {
    var listen = /^[a-z0-9]+$/i;
    var searchInput = document.getElementById('searchInput');
    var searchBar = document.getElementById('searchBar');

    if ( window.addEventListener )
        window.addEventListener( 'keyup', insertKey, false);

    function insertKey( e ) {
        // Get the character from e.keyCode
        var key = String.fromCharCode( e.keyCode ).toLowerCase(); 

        // Match the character
        if( key.match(listen) ) {

            // Change display: none; to display: block;
            searchBar.style.display = "block";
            // Append every new character
            searchInput.value += key;
            // Focus on input
            searchInput.focus();

            // Since you focused on the input you don't need to listen for keyup anymore.
            window.removeEventListener( 'keyup', insertKey );

            // I didn't tested with jQuery
            // $('#searchBar').fadeIn();
            // $('#searchBar input').append(keys);
            // $('#searchBar input').focus();
        }
    }
};
</script>

Answer 1

当您为 keyup 事件向 window 添加事件监听器时，它会在检测到 keyup 时触发，无论它来自何处从。您对正在收听的事件没有足够的歧视。

一种解决方案是将事件监听器直接添加到 input 元素，这样来自一个元素的 keyup 就不会触发另一个元素的监听器:

document.getElementById("searchInput").addEventListener("keyup", searchInputKeyHandler);
document.getElementById("commentInput").addEventListener("keyup", commentInputKeyHandler);
// etc.

这可行，但有点奇怪。如果您所做的只是监听用户输入 input HTML 元素，那么更好的监听事件是 input，它会在 input< 时触发 元素的值已更改。

document.getElementById("searchInput").addEventListener("input", searchInputKeyHandler);
document.getElementById("commentInput").addEventListener("input", commentInputKeyHandler);
// etc.

一些元素也可以监听一个change事件；做一些研究，看看什么事件最适合您的用例。