selectize.js - làm cách nào tôi có thể vô hiệu hóa con trỏ nhấp nháy sau mục đã chọn?

Question

Tôi đang sử dụng selectize.js để tạo kiểu hộp văn bản và nó hoạt động tốt.

$("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); 
    } 
    } 
}); 

Tuy nhiên, tôi có một phạm vi giới hạn các mục và không muốn con trỏ (nhấp nháy |) luôn được kích hoạt. Tôi đã tìm kiếm thông qua the API docs và nguồn nhưng không thể tìm thấy bất cứ điều gì rõ ràng.

Có điều gì đó sẵn có để tắt con trỏ nhấp nháy không?

Chỉnh sửa ban đầu có điều này là 'tắt đầu vào' nhưng có vẻ như không thể sử dụng con trỏ cho đầu vào (và tắt đầu vào vẫn hiển thị con trỏ).

Answer 1

Chọn không được thiết kế đặc biệt để hoạt động giống như một trang trí được chọn. Con trỏ đến từ phần tử <input> cho phép người dùng tùy chọn xóa. Ẩn đầu vào sẽ tạo ra hành vi lạ khi người dùng nhập. Ngoài ra, khi điều khiển trống, đầu vào được sử dụng để hiển thị văn bản trình giữ chỗ.

Về mặt kỹ thuật bạn có thể ẩn con trỏ (và đầu vào) với 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; 
} 

Nhưng một lần nữa, điều này sẽ cảm thấy sôi nổi. Tôi sẽ xem xét việc viết một plugin decorator_only để vô hiệu hóa xử lý bàn phím, nhưng nó không phải là ưu tiên trước mắt.

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

Answer 2

Bạn cũng có thể sử dụng CSS thụt lề văn bản để di chuyển con trỏ ra khỏi màn hình:

input { 
    text-indent: -100px; 
}