Bootstrap日期范围选择器：禁用手动输入但保留删除/复制功能

我之前也碰到过类似的需求，直接用onkeydown="return false"禁用所有按键确实太生硬，完全限制了删除、复制这类必要操作。下面给你一个更精准的解决方案，通过白名单允许特定按键来实现需求：

步骤1：修改模板中的输入框绑定 #

把原来的原生事件替换成Angular的事件绑定，方便在组件里做精细控制：

<input 
  type="text" 
  bsDaterangepicker 
  (keydown)="handleDateInputKeydown($event)"
  placeholder="选择日期范围"
/>

步骤2：在组件中实现按键控制逻辑 #

在你的组件类里添加一个处理键盘事件的方法，只允许删除、复制和必要的导航按键，阻止其他输入类按键：

import { Component } from '@angular/core';

@Component({
  // 组件元数据（如selector、templateUrl等）
})
export class YourComponent {
  handleDateInputKeydown(event: KeyboardEvent): void {
    // 定义允许的基础按键：删除、导航类按键
    const allowedKeyCodes = [8, 9, 35, 36, 37, 39, 46];
    // 允许复制操作（兼容Windows的Ctrl+C和Mac的Cmd+C）
    const isCopyAction = (event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'c';

    // 不在允许列表且不是复制操作的话，阻止事件默认行为
    if (!allowedKeyCodes.includes(event.keyCode) && !isCopyAction) {
      event.preventDefault();
      event.stopPropagation();
    }
  }
}

代码说明 #

这里开放的操作完全贴合你的需求：

• 删除内容：支持Backspace（键码8）、Delete（键码46）按键清除已选日期
• 复制内容：兼容Windows和Mac系统的复制快捷键
• 便捷导航：允许Tab、左右箭头、Home/End按键，方便用户选中日期文本进行操作

这样设置后，用户无法手动输入任何字符，但完全不影响bsDaterangepicker的弹窗选择功能，同时保留了删除、复制这类必要操作。

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