Disable input typing

Question

I'm using bootstrap Tokenfield library. I have a case in my project saying that I can edit tokens by clicking, but not typing, I have special form for adding new pills. Is there a way to disable typing in input form, but still have an access to removing and adding pills by clicking?

Answer 1

You can set showAutocompleteOnFocus for mouse focus so there is not any need to use keyboard for add token or remove token, example code :-

$('#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

I had a similar requirement in a project I'm working on, all the tokens are defined using a form, our requirement dictate that the user could remove a token, but not edit or add new tokens in the input, only using the provided form. My "solution" was a bit hacky: bootstrap-tokenfield adds a new input in the DOM for the user to type text that is ultimately transformed into tokens, you can disable this input and effectively prevent the user for typing new tokens.

By default the new token receive an id with the format id-tokenfield where id is the id of the original input. If no id es provided on the original input then a random number is used instead.

So disabling this input:

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

Prevents the user from creating new tokens, while keeping the chance to edit/delete tokens. In my case search is the id of the original input.

Answer 3

You can disable the input with id "tokenfield-tokenfield" after the token is created, and enable it back when it is removed.

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

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