Javascript 我的网站上有一个关键的监听器,当我尝试输入一些东西时,我的捷径会突然打开,我该如何解决这个问题

Javascript 我的网站上有一个关键的监听器,当我尝试输入一些东西时,我的捷径会突然打开,我该如何解决这个问题,javascript,html,Javascript,Html,对不起,我是javascript新手,不知道如何解决这个问题。我希望能够使用键盘快捷键,当我输入的东西,他们需要被忽略 提前谢谢你 Javascript: window.onload = function() { var menu = document.getElementById("menu"); var menubtn = document.getElementById("menubtn"); var smclose = document.getElement

对不起,我是javascript新手,不知道如何解决这个问题。我希望能够使用键盘快捷键,当我输入的东西,他们需要被忽略

提前谢谢你

Javascript:

    window.onload = function() {
    var menu = document.getElementById("menu");
    var menubtn = document.getElementById("menubtn");
    var smclose = document.getElementById("smclose");
    var bigclose = document.getElementById("bigclose");
    var strips = document.getElementsByClassName("menustrip");
    var profile = document.getElementById("profile");
    var loginbtn = document.getElementById("loginbtn");
    var popup = document.getElementById("popup-box");
    var inputs = document.getElementsByTagName("input");
    var typing = false;

    smclose.onclick = function() {
        menu.style.display = "none";
    }
    bigclose.onclick = function() {
        popup.style.display = "none";
    }
    menubtn.onclick = function() {
        menu.style.display = "block";
    }

    loginbtn.onclick = function() {
        popup.style.display = "block";
    }
    //I tried this but didn't work
    window.onclick = function(event) {
        for (var y = 0; y < inputs.length; y++) {
            if (event.target == popup) {
                popup.style.display = "none";
            } else if (event.target == inputs[y]) {
                typing = true;
            } else if (event.target != menu) {
                menu.style.display = "none";
                for (var x = 0; x < strips.length; x++) {
                    if (event.target == menu || event.target == menubtn
                            || event.target == strips[x]
                            || event.target == profile) {
                        menu.style.display = "block";
                    }
                }
            } else {
                typing = false;
            }
        }
    }
    //this is handling the shortcuts
    document.addEventListener('keydown', function(event) {
        if (typing == false) {
            if (event.keyCode == 83) {
                menu.style.display = "block";
            } else if (event.keyCode == 76) {
                popup.style.display = "block";
            } else if (event.keyCode == 67) {
                menu.style.display = "none";
                popup.style.display = "none";
            } else if (event.keyCode == 82) {
                window.location.reload();
            }
        }

    });
}
window.onload=function(){
var menu=document.getElementById(“菜单”);
var menubtn=document.getElementById(“menubtn”);
var smclose=document.getElementById(“smclose”);
var bigclose=document.getElementById(“bigclose”);
var strips=document.getElementsByClassName(“menustrip”);
var profile=document.getElementById(“profile”);
var loginbtn=document.getElementById(“loginbtn”);
var popup=document.getElementById(“弹出框”);
var inputs=document.getElementsByTagName(“输入”);
var类型=false;
smclose.onclick=函数(){
menu.style.display=“无”;
}
bigclose.onclick=函数(){
popup.style.display=“无”;
}
menubtn.onclick=函数(){
menu.style.display=“block”;
}
loginbtn.onclick=函数(){
popup.style.display=“block”;
}
//我试过了,但没用
window.onclick=函数(事件){
对于(变量y=0;y
HTML:


{%load staticfiles%}
{%block title%}{%endblock%}
登录
编辑
设置
{%block content%}{%endblock%}

T A. F P E Y Z {%block pop head%}{%endblock%} {%block pop body%}{%endblock%} {%block pop footer%}{%endblock%}
你试过捕鼠器吗

请参考以下链接


你试过捕鼠器吗

请参考以下链接


添加HTML并请澄清您试图执行的操作。@ScottMarcus我添加了HTML并请澄清您试图执行的操作。我只想在输入标记中未输入任何内容时执行键盘快捷键,例如,当您登录时,即使通常应该使用字符,您也不应该在键入字符时遇到问题要打开侧边栏,快捷键通常与组合键相关联,例如Ctrl+S用于保存。你确定要这样做吗?添加你的HTML,请说明你想做什么。@ScottMarcus我添加了它,请说明你想做什么。我只想在输入标记中没有输入任何内容时才执行键盘快捷键,例如,当你登录时,你应该在键入字符时没有问题虽然它通常用于打开侧边栏,但快捷键通常与组合键相关联,例如Ctrl+S以进行保存。你确定要走这条路线吗?
<!-- html page-->
{% load staticfiles %}
<!DOCTYPE html>

<html>
<head>
    <!-- In here I set link my css and javascript files to this & give the device width & height -->
    <link href="{% static 'css/fonts.css' %}" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Pathway+Gothic+One|Space+Mono" rel="stylesheet"> 
    <script type="text/javascript" src="{% static 'js/dascript.js' %}"></script>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, height=device-height">
    <title>{% block title %}{% endblock %}</title>
</head>
<body class="container">
    <div id="menu" class="container">
        <div id="smclose">
            <div class="crosssmall left"></div>
            <div class="crosssmall right"></div>
        </div>
        <div id="profile" class="container">
            <div class="circle">
                <img src="https://previews.123rf.com/images/glebstock/glebstock1405/glebstock140501332/29470355-male-silhouette-Unknown-person-concept-Stock-Photo.jpg" class="circle"/>
            </div>
        </div>
        <div class="container">
            <div id="loginbtn" class="menubtns">Login</div>
            <div id="costumize" class="menubtns">Edit</div>
            <div id="settings" class="menubtns">Settings</div>
        </div>
    </div>
    <div class="container flexcolumn">
        <header class="container">
            <nav class="site">  
                <div class="navibar"><a href="{% url 'polls:home' %}">{% block navitem1 %}{% endblock %}</a></div>
                <div class="navibar"><a href=#>{% block navitem2 %}{% endblock %}</a></div>
                <div class="navibar"><a href=#>{% block navitem3 %}{% endblock %}</a></div>
                <div class="navibar"><a href=#>{% block navitem4 %}{% endblock %}</a></div> 
                <div id="menubtn">
                        <div class="menustrip"></div>
                        <div class="menustrip"></div>
                        <div class="menustrip"></div>
                </div>
            </nav>
        </header>
        <div id="whiteblack" class="flexitem">
                <p>{% block content %}{% endblock %}</p>
        </div>
        <footer class="container">
            <div class="container row">
                <i id="ione" class="icon">t</i>
                <i id="itwo" class="icon">a</i>
                <i id="ithree" class="icon">f</i>
                <i id="ifour" class="icon">p</i>
                <i id="ifive" class="icon">e</i>
                <i id="isix" class="icon">y</i>
                <i id="iseven" class="icon">z</i>
            </div>
        </footer>
    </div>
    <div id="popup-box" class="popup">
        <div class="popup-content">
            <div class="popup-header">
                <div id="bigclose">
                    <div class="crossbig left"></div>
                    <div class="crossbig right"></div>
                </div>
                {% block pop-head %}{% endblock %}
            </div>
            <div class="popup-body">
                {% block pop-body %}{% endblock %}
            </div>
            <div class="popup-footer">
                {% block pop-footer %}{% endblock %}            
            </div>
        </div>
    </div>
</body>
</html>