我第一次将手放在javascript中,而我似乎无法找到一种方法来完成我需要为课程做的事情。 我们有一个定义计算器的html文件,并且已经可以使用鼠标输入。
样式和函数在单独的.css和.js文件中定义。我们应该添加键盘事件以使计算器可访问。我一直在尝试多种选择,特别是来自this page,但似乎都没有。
问题在于我甚至不知道如何查明它是否无效,因为我的功能错误或者因为我没有正确而无法正常工作专注于我的窗口...
我将在下面给出一个代码示例。我会专注于" clear"功能,我想分配给退格键(keycode = 8)。
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>MyCalc</title>
<link title="screen" media="screen" type="text/css" href="css/stylesheet.css" rel="stylesheet">
<script type="text/javascript" src="js/functions.js"></script>
</head>
<body>
<div id="calculator">
<!-- Screen and clear key -->
<div class="top">
<span class="clear" onclick="clearScreen()">C</span>
<div class="screen"></div>
</div>
<div class="keys">
<!-- operators and other keys -->
</div>
</div>
</body>
</html>
&#13;
其中clearScreen
函数定义为:
function clearScreen() {
var input = document.querySelector('.screen');
input.innerHTML = '';
}
&#13;
如果有人能告诉我如何将退格键绑定到clearScreen
函数,我会很感激。正如我上面提到的,到目前为止,我尝试将以下代码粘贴到我的.js文件中,但没有成功:
function keyListener(event) {
event = event || window.event;
var key = event.key || event.which || event.keyCode;
var input = document.querySelector('.screen');
if (key === 8) { //this is for 'backspace'
input.innerHTML = '';
}
}
var el = window; //does this even work?
var eventName = 'keypress';
if (el.addEventListener) {
el.addEventListener('click', keyListener, false);
} else if (el.attachEvent) {
el.attachEvent('on' + eventName, keyListener);
}
&#13;
注意:我使用谷歌浏览器,但我也在Mozilla和IE中进行了一些测试。我没有发现任何差异。