Question

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

keyboardShortcuts: false // Doesn't work

但是，如果你拖动背景，你就会失去输入'm'或'k'的能力。如何阻止谷歌地图抓取这些键盘键（'k'和'm'）？

Answer 1

它是否必须是可编辑的Div？我在div中添加了一个输入，它不会覆盖k＆amp;米

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 vs. 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会使插入符号去开头而不是原来的位置。）

不幸的是，在contentEditable启用的div中，获取当前选择的方法比读取/设置selectStart值（由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

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

3 个答案: