Bootstrap4 dropdown下拉菜单内输入框仅能输入数字如何解决

Bootstrap 4 的 dropdown 组件默认开启了键盘导航能力，会监听下拉菜单内的所有按键事件：当按下字母、符号类按键时，组件会自动尝试匹配首字符对应的下拉菜单项，直接拦截了输入框的默认输入行为，最终呈现出只能输入数字的现象。

• 方法1：阻止输入框的按键事件冒泡（侵入性最小，推荐）
  仅拦截输入框的按键事件向上传递到 dropdown 组件，不影响下拉菜单原本的键盘导航功能，新增JS代码如下：

$('.dropdown-menu input').on('keydown keyup keypress', function (e) {
  e.stopPropagation();
});

• 方法2：禁用当前 dropdown 的键盘导航
  给 dropdown 触发按钮添加 data-keyboard="false" 属性即可，无需额外写JS，适合不需要下拉菜单键盘导航的场景，修改后的按钮代码：

<button type="button" class="btn btn-light btn-sm dropdown-toggle" data-toggle="dropdown" data-boundary="viewport" data-keyboard="false">Spot</button>

• 方法3：使用官方推荐的下拉表单结构
  将输入框放在 form 容器内，符合 Bootstrap 设计规范，组件会自动取消对表单内输入框的按键拦截，同时可以搭配内置样式优化输入框显示，修改后的下拉菜单代码：

<div class="dropdown-menu" style="overflow-y: auto; max-height: 300px;" data-loaded="true" data-selectedvalues="S">
  <form class="px-2 py-1">
    <input placeholder="Search...Type" type="search" class="form-control">
  </form>
  <button type="button" class="dropdown-item active" data-selectedvalues="S">Spot</button>
  <button type="button" class="dropdown-item" data-selectedvalues="T">Term</button>
</div>

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