7

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;
  }
});
3
  • can you elaborate on how you've tried capturing the key events for the keypad? I assumed that if you attach handlers in your page's head (before loading the api) and return false from those handlers it would remove your problem (albeit in a rather blunt way)
    – tomfumb
    Jun 21, 2013 at 1:29
  • I think that this one of those things that can best be answered by ESRI support. Also try posting this on ESRI forums. Jun 21, 2013 at 5:32
  • I would be curious to see what you have tried that doesn't work to capture the key strokes. Perhaps if you created a jsfiddle and updated your question we could help you.
    – CLJ
    Jun 22, 2013 at 19:54

2 Answers 2

2

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();
    });
0
1

So this is what "we" (aka Justin) came up with:

        $("#search").keydown(function (e) {
            var x = e.which;
            if (x > 96 && x < 106 && $('#map').is(":hover")) {
                _self._insertAtCaret("search", e.key);
                e.preventDefault();
                return false;
            }
        });

... and from https://stackoverflow.com/questions/1064089/inserting-a-text-where-cursor-is-using-javascript-jquery ...

   _insertAtCaret: function (areaId, text) {
        var element = document.getElementById(areaId);
        if (document.selection) {
            element.focus();
            var sel = document.selection.createRange();
            sel.text = text;
            element.focus();
            element.selectionStart = element.selectionEnd;
        } else if (element.selectionStart || element.selectionStart === 0) {
            var startPos = element.selectionStart;
            var endPos = element.selectionEnd;
            var scrollTop = element.scrollTop;
            element.value = element.value.substring(0, startPos) + text +
                            element.value.substring(endPos, element.value.length);
            element.focus();
            element.selectionStart = startPos + text.length;
            element.selectionEnd = startPos + text.length;
            element.scrollTop = scrollTop;
        } else {
            element.value += text;
            element.focus();
        }
    }

But seriously, ESRI, how about a esri.Map.disableNumericKeypadNavigation() in the next release?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.