Disable input typing

问题:

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?

回答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;
});

回答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.

回答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);
});