DIV元素响应键盘事件

来源：互联网发布：javascript启示录 pdf 编辑：程序博客网时间：2024/06/07 00:50

解析：能够响应键盘事件的元素是有限的，它们是：form元素、a标签元素，window、document这样的元素；

但其它元素如果想响应键盘事件则必须具备两个基本要素：

1、具有tabindex属性

2、获取焦点；

下面我们以可移动的DIV元素嵌套实现DIV响应键盘事件的效果：

一，实现可移动的DIV标签

HTML代码如下：

CSS：

#test{position:absolute;top:0;left:0;width:400px;height:300px;background:#ccc; text-align:center; line-height:100px;overflow:hidden;}#name{background-color:#00ff00;width:150px;height:150px;position:absolute;}#usr{background-color:#00ffff;width:80px;height:80px;position:absolute;}

HTML:

<body><div id="test"><div  id="name">姓名<div id="usr">用户名</div>  </div></div></div></body>

JS代码：

function bindDrag(el){//初始化参数var els = el.style, //记录按下DIV元素时，保存DIV元素的长和宽x = y = 0;$(el).mousedown(function(e){//按下元素后，计算当前DIV标签的长和宽，X表示长，Y表示宽x = e.clientX - el.offsetLeft;y = e.clientY - el.offsetTop;//绑定事件$(document).bind('mousemove', mouseMove).bind('mouseup', mouseUp);e.stopPropagation();e.preventDefault();});//移动事件function mouseMove(e){//当移动鼠标时，用当前鼠标的Y坐标减去DIV元素的高，就是要求DIV元素的新TOP坐标//同样，用当前鼠标的X坐标减去DIV元素的宽，就是要求的DIV元素的新LEFT坐标；els.top = e.clientY - y + 'px';els.left = e.clientX - x + 'px';e.stopPropagation();e.preventDefault();}//停止事件function mouseUp(){//卸载事件$(document).unbind('mousemove', mouseMove).unbind('mouseup', mouseUp)}}$().ready(function(){bindDrag(document.getElementById('test'));bindDrag(document.getElementById('name'));bindDrag(document.getElementById('usr'));})

上面实现的效果很明显，就是用鼠标实现DIV标签的拖动效果，效果图如下：

下面实现用鼠标移动每个DIV框

1，首先在点击DIV元素时，我们要获取焦点，所以在$(el).mousedown()函数中，添加

$(this).attr('tabindex', 1); //首先为DIV标签添加tabindex属性$(this).focus();

2,添加keydown事件响应代码

$(el).keydown(function(e){switch (e.keyCode) {case 37: //左键els.left = el.offsetLeft - 1 + "px";break;case 39: //右键els.left = el.offsetLeft + 1 + "px";break;case 38: //上键els.top = el.offsetTop - 1 + "px";break;case 40: //下键els.top = el.offsetTop + 1 + "px";break;}e.stopPropagation();e.preventDefault();});

至此，所要的功能就实现了，代码我将传到资源里，跟往常一样，不要分，仅供大家学习分享，有需要的朋友下载；

BUG:

经过测试，发现：

如果将DIV标签的背景删除，这时，在IE中是无法获取焦点的，也即将无法点击移动，而在FF下是没有问题的，这可能是IE的BUG吧，现在我也没有找到解决办法，只能在应用中，将背景设置为白色，以弥补这个不足，但这样始终还不是个办法，如果有哪位朋友知道此问题的解决办法，还望不吝赐教，谢谢！

资源地址：http://download.csdn.net/detail/harvic880925/5015450

但转载记得标明出处哦！博客出处： http://blog.csdn.net/harvic880925/article/details/8524720