如何防止传单地图元素获得焦点

Question

我有一个表格，表格里面有一张传单地图。我想按 Tab 键在元素之间移动，但我不希望地图或其元素（按钮、标记等）获得焦点。如何将

tabindex="-1"

添加到地图控件和元素以防止焦点，或者我可以采取哪些措施来防止焦点？

这是一个jsfiddle来展示我的场景：http://jsfiddle.net/kedar2a/LnzN2/2/

var osmUrl = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png', osmAttrib = '&copy; <a ref="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
	 	    osm = L.tileLayer(osmUrl, {attribution: osmAttrib  });

var map = L.map('map').setView([19.04469, 72.9258], 12).addLayer(osm);

var marker = L.marker([19.04469, 72.9258]).addTo(map);

#map {
    height: 150px;
    width: 300px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet.js"></script>
<input type="text" autofocus />
<div id="map"></div>
<input type="text"  />

Answer 1

没有一次性解决方案，但您可以通过分三步禁用每个地图元素来实现此目的：

1. 禁用标记焦点： 通过向标记元素添加

   keyboard:false

   禁用对标记的键盘支持。

2. 将

   tabIndex="-1"

   属性添加到位于

   <a>

   divs

    内的所有 

   .leaflet-control
   元素

   var elements = document.querySelectorAll(".leaflet-control a");
   for (var i = 0; i < elements.length; ++i) {
     elements[i].setAttribute("tabindex", "-1");
   }
   

3. 在任何打开的标记弹出窗口内禁用关闭按钮的焦点。

     var marker = L.marker(e.latlng, {
         draggable: true,
         keyboard: false,
         title: "Resource location",
         alt: "Resource Location",
         riseOnHover: true
       }).addTo(map)
       .bindPopup(e.latlng.toString()).on('popupopen',
         function(popup) {
           //disable focus of close button
           var elCloseButton = document.getElementsByClassName("leaflet-popup-close-button")[0];
           elCloseButton.setAttribute("tabindex", "-1");
         }).openPopup();
   

查看我的实现：http://jsfiddle.net/trkaplan/bv763tkf/

Answer 2

这是禁用选项卡焦点、不带 DOM 查询选择器的更好解决方案。

const marker = L.marker(lngLat, {
   icon: 'icon.svg'
}).addTo(map);

marker._icon.tabIndex = -1;

或禁用地图上所有标记的选项卡索引：

const allMarkers = [];
map.eachLayer(layer => {
    if (layer instanceof L.Marker) {
        allMarkers.push(layer);
    }
});
allMarkers.forEach(marker => {
    marker._icon.tabIndex = -1;
});