Impedire a Google Maps di rubare l'input da tastiera

Question

In questo campo di testo, è possibile digitare "k" e "m" nel campo contenteditable e vengono visualizzati correttamente.

http://jsfiddle.net/MNsBK/

keyboardShortcuts: false // Doesn't work 

Ma, se si trascina lo sfondo, si perde la possibilità di digitare una 'm' o un 'k'. Come faccio a impedire a Google Maps di prendere questi tasti della tastiera ('k' e 'm')?

Answer 1

Deve essere un Div che è modificabile? Ho aggiunto un contributo al div e non sostituisce 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(); 
}); 

fammi sapere se deve essere assolutamente un div editabile e guarderò da vicino.

Answer 2

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

---

Non si può impedire di perdere il focus della div modificabile, altrimenti il ​​panorama non può funzionare, ma è possibile memorizzare la posizione del cursore e ripristinarlo in seguito (un semplice focus renderebbe il cursore per andare all'inizio invece della posizione originale).

Sfortunatamente, in un div abilitato contentEdit, il metodo per ottenere la selezione corrente è molto più complicato della sola lettura/impostazione del valore selectStart (utilizzato da textareas). Il modo migliore è quello di utilizzare una libreria esterna per questo: 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(); 
}); 

Il problema con i tasti "m" succede ancora ma solo in Chrome

approccio

Answer 3

JQuery "k" e:

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

stopPropagation vs. stopImmediatePropagation

Dopo aver trovato questa soluzione, c'è una soluzione ancora più semplice.

Utilizzare l'attributo keyboardShortcuts: false durante la creazione dell'istanza della mappa.

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