div内绑定键盘事件及注意事项

最新推荐文章于 2023-07-07 11:04:23 发布

放学后的泡泡

最新推荐文章于 2023-07-07 11:04:23 发布

阅读量1k

点赞数 1

本文链接：https://blog.csdn.net/rainyspring4540/article/details/119668083

版权

贴上案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>  
	<script type="text/javascript" src="../../jquery.min.js"></script>
    </style>
</head>
<body>
<div>
	<div class="a" style="width:400px;height:300px;background-color:green;" tabIndex=-1>
		
	</div>
	
	<div class="a" style="width:400px;height:300px;background-color:yellow;" tabIndex=-1>
			
			
			<!-- 这个是svg 内容 -->
			<svg
			   
			   width="400"
			   height="300"
			   viewBox="0 0 12 12"
			   version="1.1"
			   id="svg7429"
			   inkscape:version="1.0.1 (3bc2e813f5, 2020-09-07)"
			   sodipodi:docname="3-电动机.svg">
			  <defs
				 id="defs7423" />
			  <sodipodi:namedview
				 id="base"
				 pagecolor="#ffffff"
				 bordercolor="#666666"
				 borderopacity="1.0"
				 
				 showgrid="false"
				 
				 inkscape:window-maximized="1" />
			  
			  <g
				 inkscape:label="图层 1"
				 inkscape:groupmode="layer"
				 id="layer1">
				<ellipse
				   style="fill:none;stroke:#fa0000;stroke-width:0.604842;stroke-opacity:0"
				   id="path15-5"
				   cx="5.8835416"
				   cy="6.1521397"
				   rx="5.4534335"
				   ry="5.4583259"
				   class="probe" />
				<g
				   id="g13"
				   class="graph">
				  <text
					 y="7.6330495"
					 x="3.8615561"
					 style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:4.62848px;line-height:0%;font-family:'Times New Roman';-inkscape-font-specification:'Times New Roman,';text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#000000;stroke-width:0.385706"
					 id="text14674"><tspan
					   sodipodi:role="line"
					   id="tspan14676"
					   x="3.8615561"
					   y="7.6330495"
					   style="font-size:4.58611px;line-height:1.25;stroke-width:0.385706">M</tspan></text>
				  <ellipse
					 style="fill:none;stroke:#000000;stroke-width:0.50062;stroke-miterlimit:4;stroke-dasharray:none"
					 id="path8013"
					 cx="5.8903723"
					 cy="6.1147962"
					 rx="4.7496896"
					 ry="4.7615013" />
				</g>
				<ellipse
				   style="fill:none;stroke:#fa0000;stroke-width:0.523721;stroke-opacity:0"
				   id="path15"
				   cx="5.9133382"
				   cy="6.1304946"
				   rx="4.7158079"
				   ry="4.7325125"
				   class="border" />
			  </g>
			</svg>

		
	</div>
</div>
</body>
<script>
/**
参考博文
https://blog.csdn.net/zh1159007904/article/details/78026517

3. 那就制造上下级关系，把customHandler绑定在custom.html里的一个div元素上

$(“#divId”).bind("keypress",customHandler);

测试发现监听不到按键事件，因为div元素没法获取焦点，但只要为div元素加上tabIndex属性就能获取焦点

<div id="divId" tabIndex=-1></div>

4. 测试发现div里面的内容外面多了一个边框，非常难看，加上style="outline:none"后边框消失。

*/

$(".a").bind("keyup",function(e){
	var code = e.keyCode;
	alert(code);
	//删除选中的对象
	
	
});





</script>
</html>

   需要特殊注意的是：div 内包含很多内容，可能会影响外部div的焦点获取，此时需要在鼠标点击div 时，主动让外部div 获取焦点。
   即
   $("#a").click(function(){
       $("#a").focus();
   });

放学后的泡泡

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
div内绑定键盘事件及注意事项

贴上案例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="../../jquery.min.js"></script> </style></head><bo
复制链接

扫一扫