readonly input attribute or similar

[santimacia]

It's possible to use the readonly attribute? I tried to put it but when it's rendered the attribute disappears.

[danielsvane]

Isn't it possible to simply not initialize the input as a tagsinput?

[danielsvane]

Silly of me, of course it could be a use case when you want to display the tags but not edit them.

[fouimette]

Is there read-only support? I would like to be able to display the tags (categorized and all) in a read only scenario. Only the originator will have the ability to edit/change the tags. Also, it would be nice to display the tags, in a read-only state, outside of input fields. Such as a label.

[KrishnaPG]

The disabled state PR(https://github.com/bootstrap-tagsinput/bootstrap-tagsinput/issues/166) is good one to start with, but still the UI is not reflecting the "disabled" state. For example, below is the screenshot of one such control in disable state (but looks like it is functional until user clicks it and it does not respond, driving them crazy). Perhaps removing the "x" marks in the individual items and removing the "all encompassing white box in the background" to show only the items could be useful.

Something like below (mockup, not real ) should do:

[ktohme]

I'm also looking for a possibility for really disabling the input field like KrishnaPG has advised

Edit: Here is some dirty hack you could use

var tagsinput = $('#idOfTagsInput').next();
tagsinput.removeClass('bootstrap-tagsinput');
tagsinput.find("input").remove();
tagsinput.css("padding-bottom", "10px");

[drmalus]

Hi all!

I had the same problem.
My dirty hack is:

.bootstrap-tagsinput .tag [data-role="remove"] { display: none; }
.bootstrap-tagsinput input { display: none; }

[Disane87]

I really would love the solution @KrishnaPG described.

[kimyu92]

@drmalus not a bad idea

using similar idea, to prevent input but allow user to remove

.bootstrap-tagsinput {
   border: none;
   box-shadow: none;
}
.bootstrap-tagsinput input {
   display: none;
}

[drmalus]

@kimyu92 that's right! Thanks for the correction!

[querubinRamonchito]

You can do this:

$('#tagsInputId').attr('disabled','disabled');

if(isDisabledVar !== true){
$('#tagsInputId').removeAttr('disabled');
}

By doing the above code, you're adding disabled attribute to the textbox itself. This is somehow the answer to @fouimette 's question:

Is there read-only support? I would like to be able to display the tags (categorized and all) in a read only scenario. Only the originator will have the ability to edit/change the tags

Depending on what javascript library you're using, this will do the trick. Since the above scenario requires that only the originator will have the ability to edit/change the tags, it will be fine to add this condition as a replacement for the if(variable)...

I hope it helps.

[kompiuter]

An additional method to prevent user input while allowing the user to remove:

$(document).ready(function() {
    $(".bootstrap-tagsinput > input").prop("readonly", true);
})

[expressiveco]

Following could be used to disable editing for specific input;

$('#tagsInputId').tagsinput('input').prop("readonly", true);

An additional method to prevent user input while allowing the user to remove:

$(document).ready(function() {
    $(".bootstrap-tagsinput > input").prop("readonly", true);
})

[Ken0420]

try this one,
$( "#tagsInputId" ).prop( "disabled", true );