google-maps - Google マップがキーボード入力を盗むのを防ぐ

Question

このテキスト フィールドで、'k' と 'm' を contenteditable フィールドに入力すると、正しく表示されます。

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

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

---

You can't prevent loosing the focus of the editable div, otherwise the panorama can't work, but you can store the caret position and restore it later (a simple focus would make the caret to go to the beginning instead of the original position).

Unfortunately, in a contentEditable enabled div, the method to obtain the current selection is much more complicated than just read/set the selectStart value (used by textareas). The best way is to use an external library for that: 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();
});

The problem with the "k" and "m" keys still happens but only in Chrome