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

喜欢ヅ旅行 2022-09-04 10:54 182阅读 0赞

贴上案例

<!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
    			   
    			   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();  
    \});