1
申し訳ありませんが、私は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();
}
}
});
}
HTML：
<!-- 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>
次のリンクを参照してください、あなたのHTMLを追加あなたがしようとしていることを明確にしてください。 –
@ScottMarcus私はそれを追加しました – xyhlon
そしてあなたがしようとしていることを明確にしてください。 –