0

当使用谷歌地图自定义覆盖添加弹出窗口时输入文本框如下所示，当我尝试点击 IE Edge 15 上的输入框时（尚未在其他 IE 版本上测试）我无法点击它并开始键入好像它不会将焦点设置在输入框上。

它确实适用于 Chrome。

CustomMarker.prototype.onAdd = function() {
  var self = this;
  var div = this.div;
  if (!div) {
    // Generate marker html
    div = this.div = document.createElement('div');
    div.className = 'custom-marker';
    div.style.position = 'absolute';
    div.innerHTML = '<span><input type="text" value="asfd" style="padding:10px;font-size:18px;" /></span>';
    var innerDiv = document.createElement('div');
    innerDiv.className = 'custom-marker-inner';

    div.appendChild(innerDiv);

    if (typeof(self.args.marker_id) !== 'undefined') {
      div.dataset.marker_id = self.args.marker_id;
    }

    google.maps.event.addDomListener(div, "click", function(event) {
      google.maps.event.trigger(self, "click");
    });

    var panes = this.getPanes();
    panes.overlayImage.appendChild(div);
  }
};

完整的示例代码在这里 - jsfiddle

我想知道我上面的实现是错误的还是谷歌地图的错误？[编辑：还是有解决办法？]

4

1 回答 1

1

我已经叉了你的小提琴。这可能有点 hacky，但我已经更新了 click 事件以专注于输入：

google.maps.event.addDomListener(div, "click", function(event) {
    google.maps.event.trigger(self, "click");
    event.target.focus();
});

https://jsfiddle.net/ng4hxqfs/5/

于 2017-09-04T14:50:57.127 回答