javascript - selectize.js - 如何禁用所选项目后的闪烁光标？

Question

我正在使用selectize.js来设置文本框的样式，并且效果很好。

$("select[name='somename']").selectize({
  valueField: 'id',
  labelField: 'name',
  searchField: 'name',
  options: selectableThings,
  render: {
    option: function(item, escape) {
      return render(someTemplate, item);
    },
    item: function(item, escape) {
      return render(someTemplate, item);
    }
  }
});

但是，我的项目范围有限，并且不希望始终启用光标（闪烁|）。我已经搜索了 API 文档和源代码，但找不到任何明显的东西。

是否有内置功能可以禁用闪烁的光标？

编辑最初将此作为“禁用输入”，但看起来光标不能用于输入（并且禁用输入仍然显示光标）。

Answer 1

Selectize不是专门设计的，只是用作精选的装饰器。光标来自一个<input>允许用户减少选项的元素。当用户键入时，隐藏输入会产生奇怪的行为。此外，当控件为空时，输入用于显示占位符文本。

从技术上讲，您可以使用 CSS 隐藏光标（和输入）：

/* option a: make transparent */
.selectize-input input {
    color: transparent !important;
}

/* option b: position off-screen */
.selectize-input input {
    position: absolute !important;
    top: -9999px;
    left: -9999px;
}

但同样，这会让人觉得很时髦。我会考虑编写一个decorator_only禁用键盘处理的插件，但这不是当务之急。

http://jsfiddle.net/mARDE/1/

Answer 2

您还可以使用 CSS 文本缩进将光标移出屏幕：

input {
     text-indent: -100px;
}

Answer 3

如果要禁用 selectize 的键盘功能，只需将其设为 input readonly。

$(select).selectize(options);
select.parentNode.querySelector('input').readOnly = true;

Answer 4

如果您想在将 selectize 用于简单的单项选择下拉菜单时移除闪烁的输入光标，则需要将原来的选择元素的颜色设置为透明，该元素已被 selectize HTML 替换。

#myform select {
    color: transparent;
}