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

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

禁用标记的焦点：通过将keyboard:false添加到标记元素来禁用键盘对标记的支持。

向tabIndex="-1" div内的所有<a>元素添加.leaflet-control属性

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

在任何打开的标记弹出窗口中禁用“关闭按钮”的焦点。

  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/

如何防止传单地图元素成为焦点

1 个答案: