Preventing Google Maps from stealing keyboard input

Question

On this text field, you can type 'k' and 'm' into the contenteditable field and they correctly appear.

keyboardShortcuts: false // Doesn't work

But, if you drag the background, you'll lose the ability to type an 'm' or a 'k'. How do I stop Google Maps from grabbing these keyboard keys ('k' and 'm') ?

Mate, any luck with the solutions? – Matt Rowles Sep 06 '13 at 02:32 — Matt Rowles, Sep 06 '13 at 02:32

score 2 · Accepted Answer · answered Aug 12 '13 at 00:39

2

Does it have to be a Div that is editable? I added an input into the div and it doesn't override 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();
});

Let me know if it absolutely has to be an editable div and I'll have a closer look.

answered Aug 12 '13 at 00:39

Matt Rowles

7,721
18
55
88

1

Very close! It does need to be a contentEditable. (The text box I'm using needs to grow based on user input.) I've removed the map feature from my app for now and don't need a solution. Still, an interesting issue. – Nov 25 '13 at 15:51
@arby perhaps you could use a Textarea instead, along with this plugin http://bgrins.github.io/ExpandingTextareas/ – Matt Rowles Nov 25 '13 at 21:17

TrophyGeek · Answer 2 · 2018-05-05T17:47:10.593

JQuery approach:

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

stopPropagation vs. stopImmediatePropagation

After finding that solution, there's an even easier solution.

Use keyboardShortcuts: false attribute when creating the map instance.

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

Juan-Pablo Scaletti · Answer 3 · 2013-08-17T22:53:14.087

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

Preventing Google Maps from stealing keyboard input

3 Answers3