selectizejs输入框双击无法选中全部文本，自定义事件不生效如何解决？

安全阿岳

2026-10-6

Selectize.js双击选中全部文本解决方案

原代码失效原因

你调用的select()方法仅可作用于<input>、<textarea>这类原生可编辑表单元素，原代码中item.text()返回的是纯字符串，没有该方法。
Selectize渲染后，展示选中值的.item是普通span元素，并非原生输入控件，无法直接调用表单元素的选中方法。

可用实现代码

使用浏览器原生Selection API实现普通元素内文本选中：

$('.selectize-input').on('dblclick', function() {
  // 取.item对应的原生DOM元素
  const item = $(this).find('.item')[0];
  if (!item) return;
  // 创建文本选区
  const selection = window.getSelection();
  const range = document.createRange();
  range.selectNodeContents(item);
  // 清空已有选区后添加新选区
  selection.removeAllRanges();
  selection.addRange(range);
});

适配动态渲染场景

如果你的Selectize组件是页面加载后动态生成的，使用事件委托模式绑定事件避免失效：

// 可将body替换为你页面中确定存在的Selectize父容器，提升性能
$('body').on('dblclick', '.selectize-input', function() {
  const item = $(this).find('.item')[0];
  if (!item) return;
  const selection = window.getSelection();
  const range = document.createRange();
  range.selectNodeContents(item);
  selection.removeAllRanges();
  selection.addRange(range);
});