Question

我正在使用bootstrap Tokenfield库。我的项目中有一个案例说我可以通过点击来编辑令牌，但不能打字，我有添加新药的特殊表格。有没有办法禁用输入表单中的输入，但仍然有权通过单击删除和添加药丸？

Answer 1

您可以设置showAutocompleteOnFocus用于鼠标焦点，因此无需使用键盘添加令牌或删除令牌，示例代码： -

$('#tokenfield').tokenfield({
    autocomplete: {
        source: ['red','blue','green','yellow','violet','brown','purple','black','white'],
        delay: 100
    },
    showAutocompleteOnFocus: true
});

$("#tokenfield").keydown( function(key) {
    return false;
});

Answer 2

我在我正在进行的项目中有类似的要求，所有令牌都是使用表单定义的，我们的要求规定用户可以删除令牌，但不能在输入中编辑或添加新令牌，仅使用提供的表格。我的解决方案＆＃34;有点hacky：bootstrap-tokenfield在DOM中添加一个新输入，供用户输入最终转换为标记的文本，您可以禁用此输入并有效地阻止用户键入新标记。

默认情况下，新令牌会收到格式为id-tokenfield的ID，其中id是原始输入的ID。如果原始输入上没有提供id，则使用随机数。

因此禁用此输入：

$('#search-tokenfield').prop('disabled', 'disabled');

防止用户创建新令牌，同时保留编辑/删除令牌的机会。在我的情况下，search是原始输入的ID。

Answer 3

您可以在创建令牌后禁用ID为“ tokenfield-tokenfield”的输入，并在删除令牌后将其启用。

$('#tokenfield').on('tokenfield:createdtoken', function (e) {
    $('#tokenfield-tokenfield').prop('disabled', true);
});

$('#tokenfield').on('tokenfield:removedtoken', function (e) {
        $('#tokenfield-tokenfield').prop('disabled', false);
});

禁用输入输入

3 个答案: