DIV元素响应键盘事件

2021年6月30日 11点热度 0条评论 来源: 启舰

解析:能够响应键盘事件的元素是有限的,它们是:form元素、a标签元素,windowdocument这样的元素;

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

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

 

    原文作者:启舰
    原文地址: https://blog.csdn.net/harvic880925/article/details/8524720
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系管理员进行删除。