Как не дать элементам карты листовки получить фокус

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> элементам, расположенным внутри .leaflet-control div

   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/