google-maps - 防止谷歌地图窃取键盘输入

Question

在此文本字段中，您可以在 contenteditable 字段中键入“k”和“m”，它们会正确显示。

http://jsfiddle.net/MNsBK/

keyboardShortcuts: false // Doesn't work

但是，如果您拖动背景，您将无法输入“m”或“k”。如何阻止 Google 地图抓取这些键盘键（'k' 和 'm'）？

Answer 1

它必须是可编辑的 Div 吗？我在 div 中添加了一个输入，它不会覆盖 k & m

http://jsfiddle.net/MNsBK/27/

HTML：

<div id="map"></div>
<div id="keyIn" contenteditable="true">
    <input type='text' />
</div>

JS：

$('#map').mouseup(function(){
  $('#keyIn input').focus();
});

让我知道它是否绝对必须是一个可编辑的 div，我会仔细看看。

Answer 2

jQuery方法：

  $("div [contenteditable=true]").keypress(function(e) {
    e.stopImmediatePropagation();
  });

stopPropagation 与 stopImmediatePropagation

找到该解决方案后，还有一个更简单的解决方案。

keyboardShortcuts: false创建地图实例时使用属性。

map = new google.maps.Map(document.getElementById('map'), {
  keyboardShortcuts: false,
  center: {lat: 37.7932339, lng: -122.4077706},
  zoom: 15});

Answer 3

http://jsfiddle.net/ZjYT2/2/

---

您不能防止失去可编辑div的焦点，否则全景无法工作，但您可以存储插入符号位置并稍后恢复（简单focus会使插入符号转到开头而不是原始位置） .

selectStart不幸的是，在启用 contentEditable 的 div 中，获取当前选择的方法比读取/设置值（由 textareas 使用）要复杂得多。最好的方法是为此使用外部库：https ://code.google.com/p/rangy/

var $keyIn = $('#keyIn');
var savedSel;

$keyIn.bind('keydown mouseup', function(){
    savedSel = rangy.saveSelection();
})

$('#map').bind('mouseup', function(){
    rangy.restoreSelection(savedSel);
    savedSel = rangy.saveSelection();
    $keyIn.focus();
});

“k”和“m”键的问题仍然存在，但仅限于 Chrome