[GIS] ESRI JS API, how to disable panning with the numeric keypad

arcgis-javascript-apiarcgis-server

We have a web-based mapping application that uses the ESRI JS API. We would like to disable panning with the numeric keypad. There is a method in the API, esri.Map.disableKeyboardNavigation(), that disables panning with the dedicated arrow keys and leaves the numeric keypad enabled. We want just the opposite, i.e disable panning with the numeric keypad and leave the dedicated arrow keys enabled.

Why do we want to do this? We have a search box above the map, and if you click on the search box to give it focus and start typing, and the arrow cursor (not the vertical bar cursor, which is still in the search box) drifts back down into the map, using the numeric pad to type numbers results in panning of the map instead.

We have tried various combinations of capturing the keyup, keydown, keypress events for the map and the search box, but have not found a combination that solves our issue.

EDIT: ESRI's samples have the same behavior, so here is one of their samples in a jsfiddle: http://jsfiddle.net/Q4NVN/2/. It successfully stops the panning, but numeric input is blocked when the arrow cursor is over the map. Ideally, we should be able to enter digits whenever the vert bar cursor is in the test box, no matter where the arrow cursor is.

$("#search").keydown(function (event) {
  var x = event.which;
  if (x > 96 && x < 106 && $('#map').is(":hover")) {
    var press = jQuery.Event("keypress");
    press.ctrlKey = false;
    press.which = x - 48;
    press.keyCode = x - 48;
    press.charCode = x - 48;
    $("#search").trigger(press);
    event.preventDefault();
    return false;
  }
});

EDIT: This would appear to work, but does not take into account cases where the vert cursor is not at the end of the string (e.g. editing the search criteria):

$("#search").keydown(function (event) {
  var x = event.which;
  if (x > 96 && x < 106 && $('#map').is(":hover")) {
    $(this).val($(this).val() + (x - 96));
    event.preventDefault();
    return false;
  }
});

Best Answer

I was having the same issue regarding data entry while displaying the map when I ran across this post. Instead of setting event listeners looking for key strokes and preventing the default I disabled the map. Hopefully this will work for someone else. 

    $('input').focus(function () {
        map.disableMapNavigation();
    });

    $('input').blur(function () {
        map.enableMapNavigation();
    });
Related Question