Community

Map.on key-down & key-up not working in IE 10?

1439
3
09-05-2013 08:39 AM
DominickCisson
by
Occasional Contributor
‎09-05-2013 08:39 AM
I believe the map.on events "key-down" and key-up" are not functioning in Internet Exporter 10.  Has anyone else experienced this issue?

Below is a very simple modified ESRI sample that highlights this problem.  Run it in anything but IE 10 and the key-down event fires.

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
    <title>Simple Map</title>
    <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/esri/css/esri.css">
    <style>
      html, body, #map {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
      }
      body {
        background-color: #FFF;
        overflow: hidden;
        font-family: "Trebuchet MS";
      }
    </style>
    <script src="http://js.arcgis.com/3.6/"></script>
    <script>
      var map;

      require(["esri/map", "dojo/domReady!"], function(Map) {
        map = new Map("map", {
          basemap: "topo",
          center: [-122.45,37.75], // long, lat
          zoom: 13,
          sliderStyle: "small"
        });
        map.on("key-down",function(){console.log("Down!")});
      });
    </script>
  </head>

  <body>
    <div id="map"></div>
  </body>
</html>
0 Kudos
3 Replies
ChrisJudd1
by
New Contributor III
‎11-08-2013 05:23 AM
I can confirm this is still an issue on in the 3.7 version of the api and manifests itself on only with the key-up and key-down events but also in the tools that depend on key-up and key-down like snapping: https://developers.arcgis.com/en/javascript/jssamples/widget_measurement.html

Is there anything that folks are doing to get around this issue for IE 10?
0 Kudos
ReneRubalcava
by
Frequent Contributor
‎11-08-2013 06:36 AM
I haven't tried this with IE10 yet, but it worked in IE9, you might be able to do it like this.
// using the container div
map.container.onkeydown = function(e) {
 console.log("container: native listen down", e);
};
map.container.onkeyup = function(e) {
 console.log("container: native listen up", e);
};

// using the root div
map.root.onkeydown = function(e) {
 console.log("root: native listen down", e);
};
map.root.onkeyup = function(e) {
 console.log("root: native listen up", e);
};


However this is only works on the map in IE on my end, it didn't work in Chrome for me, so mileage may vary.
0 Kudos
ChrisJudd1
by
New Contributor III
‎11-08-2013 08:15 AM
Thanks, Rene, but unfortunately this did not work with IE 10...

I haven't tried this with IE10 yet, but it worked in IE9, you might be able to do it like this.
// using the container div
map.container.onkeydown = function(e) {
 console.log("container: native listen down", e);
};
map.container.onkeyup = function(e) {
 console.log("container: native listen up", e);
};

// using the root div
map.root.onkeydown = function(e) {
 console.log("root: native listen down", e);
};
map.root.onkeyup = function(e) {
 console.log("root: native listen up", e);
};


However this is only works on the map in IE on my end, it didn't work in Chrome for me, so mileage may vary.
0 Kudos