2013-09-25 4 views
7

Я использую selectize.js для создания текстовых полей, и он отлично работает.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); 
    } 
    } 
}); 

Однако у меня есть ограниченный круг вопросов, и не хочу, чтобы курсор (мигающий |), чтобы включить все время. Я искал the API docs и источник, но не могу найти ничего очевидного.

Есть ли что-то встроенное для отключения мигающего курсора?

Редактировать Первоначально это было как «отключение ввода», но похоже, что курсор не может использоваться для ввода (и отключение ввода по-прежнему показывает курсор).

ответ

9

Selectize не предназначен специально для того, чтобы действовать как декоратор. Курсор поступает из элемента <input>, который позволяет пользователям использовать параметры wittle down. Скрытие ввода создаст странное поведение, когда пользователь наберет. Кроме того, когда элемент управления пуст, вход используется для отображения текста заполнителя.

Технически вы можете скрыть курсор (и вход) с помощью 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/

+0

Вы можете просто установить 'maxOptions: 1', и он будет действовать как«украшенной 'select' « – Roi

+0

@roi no,' maxOptions: 1' и 'maxItems: 1' не помогло .. –

1

Вы также можете использовать CSS отступ текста, чтобы переместить курсор за пределы экрана:

input { 
    text-indent: -100px; 
} 
Смежные вопросы