使用Selectize.js时聚焦输入框无法编辑问题求助

AI 小北

2026-8-15

Selectize.js 选中选项后输入框无法编辑的问题排查与解决

常见原因

Selectize默认配置限制输入权限：未开启create选项时，选中选项后输入框会被锁定，无法手动输入内容。
选中选项后输入框未获得正确焦点状态，或被设置为只读属性。
自定义事件逻辑干扰输入框正常交互（比如阻止键盘事件冒泡）。

解决办法

1. 开启允许输入的核心配置

初始化Selectize时，必须设置create选项来解锁输入行为——即使不需要创建新选项，也可以通过返回false禁用创建但保留输入权限：

$('#your-select-element').selectize({
  // 允许输入，同时禁用创建新选项（可根据需求调整）
  create: function(input) {
    return false;
  },
  // 选中选项后自动聚焦输入框
  onItemAdd: function() {
    this.$control_input.focus();
  }
});

如果需要支持创建新选项，直接将create设为true即可：

$('#your-select-element').selectize({
  create: true,
  onItemAdd: function() {
    this.$control_input.focus();
  }
});

2. 手动解除只读限制（特殊场景）

如果输入框被意外设置为只读，可在onItemAdd事件中手动移除只读属性：

$('#your-select-element').selectize({
  // 其他配置...
  onItemAdd: function(value, item) {
    this.$control_input.removeAttr('readonly').focus();
  }
});