Google 使用 INPUT 文本映射自定义覆盖层在 IE Edge 上不起作用

Question

当使用 Google Map Custom Overlay 添加带有输入文本框的弹出窗口时，如下所示，当我尝试单击 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);
  }
};

Full example code here - jsfiddle

我想知道我上面的实现是否有误，或者这是 Google Map 的错误？ [编辑：或者有变通办法吗？]

Answer 1

我已经分叉了你的fiddle。这可能有点老套，但我已经更新了点击事件以专注于输入：

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

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

Google 使用 INPUT 文本映射自定义覆盖层在 IE Edge 上不起作用

Google Map Custom Overlay with INPUT text not working on IE Edge

javascript

internet-explorer

google-maps

google-maps-api-3

custom-overlay