先贴上代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{margin:0;padding:0;}
#box{width:100px;height:100px;
background:lime;
}
</style>
</head>
<body>
<div id="box"></div>
<input type="text" value="" id="btn" />
<script>
window.onload=function(){
var oBox=document.getElementById('box');
var oBtn=document.getElementById('btn');
//div加onkeydown事件,失败。
oBox.onkeydown=function(){
alert('div');
};
//给input加onkeydown,成功
oBtn.onkeydown=function(){
alert('btn');
};
};
</script>
</body>
</html>
请问,为什么给div标签加onkeydown事件失败,而给input标签加onkeydown事件却能成功呢?多谢!
IE不支持charcode和which
在FF和chrome中div没有focus的话就不能相应onkeypress了 你可以给div加一个tabindex的值 任意的就好 然后就可以响应了
keycode能响应shift ctrl等非字符键
charcode能区分大小写 但是不能响应非字符键
charcode只能在onkeypress下面才有值,其他的onkeydown onkeyup下面是没有值的
keycode在onkeypress下面没有值
其实将@xiadd和@rickytan的答案结合就可以解答题主的问题了。
但其实呢,题主,你的问题本身是有一些小问题的。因为,并不是给div加keydown事件失败,input加keydown成功,所有的元素都是可以添加keydown事件的。这里div的onkeydown事件处理程序只是一个声明,但是,问题就在于div没有获取你keydown的事件流,所以,这个事件处理程序,有声明却并没有执行。那为什么input行呢,你在input,keydown的时候,别把光标点上去,试试,是一样不能执行onkeydown的事件处理程序的。
那么,为什么document是可以的呢,这就是另外的问题了,因为HTML中的事件流是冒泡机制传播的,如果不执行stopPropagation()阻止事件持续传播的话,document就可以get到你keydown的事件流。window当然就更可以了。总之,可以简单按照@xiadd的答案理解,实际应用中,一般都是在input加键盘事件就好了。如果你实在想只让div进行事件处理,一种是,冒泡捕获,让div暴露可供提供焦点的接口(子元素);还有一种是自定义事件模拟。当然这又是另外的话题了。
没有光标如何响应key事件啊, 你给div设置属性contenteditable="true",然后focus之后你再试试就知道了
Focused element processing the key event, root element if no suitable input element focused.MDN
div没有获得焦点,一般我使用键盘事件都是document和input。其他也不会起作用
不会失败,http://jsfiddle.net/rickytan/zkjp2zzv/
可能是div无法监听键盘相关事件吧