如何限制全选快捷键的选中文本范围，仅选中当前获焦div内内容

基础实现（兼容跨平台快捷键） #

首先修正快捷键判断逻辑，同时支持Windows/Linux的Ctrl+A和Mac系统的Cmd+A，再配合Selection API实现元素内文本选中：

onKeyDown: function (ev) {
  // 匹配全平台全选快捷键
  if (ev.key === 'a' && (ev.ctrlKey || ev.metaKey)) {
    // 阻止浏览器默认全局全选行为
    ev.preventDefault();
    const selectTarget = ev.target;
    
    // 兼容contenteditable可编辑元素
    if (selectTarget.isContentEditable) {
      document.execCommand('selectAll');
      return;
    }

    // 普通div选中逻辑
    const selection = window.getSelection();
    const range = document.createRange();
    // 选中目标节点的所有内容
    range.selectNodeContents(selectTarget);
    // 清空原有选区后添加新选区
    selection.removeAllRanges();
    selection.addRange(range);
  }
}

前置要求：普通div需要添加tabindex="0"属性，才能正常获取键盘焦点触发keydown事件，示例：<div tabindex="0">待选中的文本内容</div>

更高层级的通用实现方案 #

如果需要在多个元素上复用该能力，可按场景做封装：

• 原生JS场景：给document绑定全局keydown事件，仅当当前聚焦元素带有data-select-all自定义属性时才触发上述逻辑，无需给每个元素单独绑定事件
• 前端框架场景：封装为自定义指令（Vue）/自定义属性（React），使用时直接给目标元素添加对应指令/属性即可，全局统一维护逻辑

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