javascript - 禁用输入输入

Question

我正在使用引导 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

您可以在创建令牌后禁用 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);
});

Answer 3

我正在处理的项目中有类似的要求，所有令牌都使用表单定义，我们的要求规定用户可以删除令牌，但不能在输入中编辑或添加新令牌，只能使用提供的表单. 我的“解决方案”有点老套：bootstrap-tokenfield 在 DOM 中添加了一个新输入，供用户输入最终转换为令牌的文本，您可以禁用此输入并有效地阻止用户输入新令牌。

默认情况下，新令牌接收一个 id，其格式为原始输入的 id id-tokenfield。id如果原始输入上没有提供 id ，则使用随机数代替。

所以禁用这个输入：

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

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