ArcGIS地图快捷键干扰页面文本框输入问题修复咨询

这个问题本质是ArcGIS JS API的地图控件默认会监听全局键盘事件，哪怕焦点已经在文本框中，它依然会捕获小键盘的按键事件来执行地图导航操作，导致文本框无法正常接收输入。下面给你两种可行的解决方案，按需选择：

方案1：让地图仅在自身聚焦时响应键盘导航 #

这种方案既能保留地图的键盘导航功能，又能避免干扰文本框输入，是比较推荐的做法：

步骤1：给地图容器添加可聚焦属性 #

首先在HTML中给你的map容器加上tabindex，让它可以获得焦点：

<div id="map" tabindex="0"></div>

步骤2：动态启用/禁用地图键盘导航 #

在你的initMap函数中，地图初始化完成后，添加焦点监听，仅当地图容器获得焦点时才启用键盘导航：

function initMap() {
  return require([
    "esri/map",
    "esri/layers/ArcGISTiledMapServiceLayer",
    // 其他依赖...
    "dojo/on",
    "dojo/dom",
    "dojo/domReady!"
  ], function (
    Map,
    ArcGISTiledMapServiceLayer,
    // 其他参数...
    on, dom
  ) {
    map = new Map("map", {
      center: [99.999, 99.999],
      zoom: 12,
      keyboardNavigationEnabled: false // 先默认禁用全局键盘导航
    });

    var mapServiceURL = "http://server.com/arcgis2/rest/services/Common/BASEMAP_BIPD/MapServer";
    map.addLayer(new ArcGISTiledMapServiceLayer(mapServiceURL));

    // 地图容器获得焦点时，启用键盘导航
    on(dom.byId("map"), "focus", function() {
      map.keyboardNavigationEnabled = true;
    });

    // 地图容器失去焦点时，禁用键盘导航
    on(dom.byId("map"), "blur", function() {
      map.keyboardNavigationEnabled = false;
    });
  });
}

方案2：直接禁用地图的全部键盘导航 #

如果你的业务场景不需要地图的键盘导航功能，可以直接在地图初始化时关闭该特性，一步到位：

map = new Map("map", {
  center: [99.999, 99.999],
  zoom: 12,
  keyboardNavigationEnabled: false // 彻底禁用所有键盘导航行为
});

方案3：仅拦截小键盘的数字键事件 #

如果你需要保留部分地图键盘导航，只是不想让小键盘数字键被干扰，可以拦截地图的键盘事件，阻止小键盘数字键的处理：

function initMap() {
  return require([
    "esri/map",
    "esri/layers/ArcGISTiledMapServiceLayer",
    // 其他依赖...
    "dojo/on",
    "dojo/domReady!"
  ], function (
    Map,
    ArcGISTiledMapServiceLayer,
    // 其他参数...
    on
  ) {
    map = new Map("map", {
      center: [99.999, 99.999],
      zoom: 12
    });

    var mapServiceURL = "http://server.com/arcgis2/rest/services/Common/BASEMAP_BIPD/MapServer";
    map.addLayer(new ArcGISTiledMapServiceLayer(mapServiceURL));

    // 拦截地图的键盘按下事件
    on(map, "key-down", function(evt) {
      // NumLock开启时，小键盘0-9的键码范围是96-105
      const numPadKeyCodes = [96,97,98,99,100,101,102,103,104,105];
      if (numPadKeyCodes.includes(evt.keyCode)) {
        evt.stopPropagation(); // 阻止事件传递给地图
        evt.preventDefault(); // 取消地图默认的导航行为
      }
    });
  });
}

问题根源说明 #

ArcGIS JS API的Map控件默认会在document级别注册键盘事件监听器，用于实现地图平移（方向键）、缩放（±键）等导航功能。当NumLock开启时，小键盘的数字键触发的事件会被这个全局监听器捕获，导致文本框无法正常接收输入；而切换文本框再返回时，焦点重新回到文本框，浏览器会优先让焦点元素处理事件，因此输入恢复正常。

内容的提问来源于stack exchange，提问作者user2151099