Question

我的目标就是当你输入搜索栏时会弹出下面的代码工作但我输入不同的输入时有问题，例如注释输入js listen并打开搜索栏。是否有可能当我已经在不同的输入字段中时，搜索不会弹出并显示。

<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

当您为window事件向keyup添加事件监听器时，无论问题来自何处，都会在检测到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事件;做一些研究，看看哪个事件最适合您的用例。

Js键盘听

1 个答案: