Ngăn Google Maps đánh cắp đầu vào bàn phím

Question

Trên trường văn bản này, bạn có thể nhập 'k' và 'm' vào trường có thể chỉnh sửa và chúng xuất hiện chính xác.

http://jsfiddle.net/MNsBK/

keyboardShortcuts: false // Doesn't work 

Nhưng, nếu bạn kéo nền, bạn sẽ mất khả năng gõ một 'm' hoặc 'k'. Làm cách nào để ngăn Google Maps lấy các phím trên bàn phím ('k' và 'm')?

Answer 1

Có phải đó là Div có thể chỉnh sửa không? Tôi thêm một đầu vào cho div và nó không ghi đè lên 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(); 
}); 

Hãy cho tôi biết nếu nó hoàn toàn phải là một div có thể chỉnh sửa được và tôi sẽ có một cái nhìn gần hơn.

Answer 2

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

---

Bạn không thể ngăn chặn mất sự tập trung của div có thể chỉnh sửa, nếu không bức tranh toàn cảnh không thể làm việc, nhưng bạn có thể lưu trữ các vị trí dấu nháy và khôi phục lại nó sau (một đơn giản sẽ làm cho focus dấu mũ để đi đến đầu thay vì vị trí ban đầu).

Thật không may, trong div có thể chỉnh sửa nội dung, phương pháp để có được lựa chọn hiện tại phức tạp hơn nhiều so với chỉ đọc/đặt giá trị selectStart (được sử dụng bởi textareas). Cách tốt nhất là sử dụng một thư viện bên ngoài cho rằng: 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(); 
}); 

Vấn đề với "k" và "m" chìa khóa vẫn xảy ra nhưng chỉ trong Chrome

Answer 3

JQuery cách tiếp cận:

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

stopPropagation vs. stopImmediatePropagation

Sau khi tìm giải pháp đó, thậm chí còn có giải pháp dễ dàng hơn.

Sử dụng thuộc tính keyboardShortcuts: false khi tạo bản đồ.

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