Widget JQuery tag-it - quelle est la meilleure façon de désactiver les entrées?

Question

Pour le widget tag-it de l'interface utilisateur Jquery, je souhaite désactiver la saisie de texte dans la zone de texte class = "ui-widget-content ui-autocomplete-input" qui contient toutes les balises.

Mon but est simplement de permettre à certaines personnes de supprimer des balises inappropriées, mais de ne permettre à personne d'ajouter des balises (qui sont générées automatiquement).

Est-ce que la meilleure chose pour moi est d'éditer le fichier tag-it .js et d'ajouter un disable = "disable" pour ce champ? Si je fais cela, cela n'empêchera-t-il pas le contenu de ce champ d'être soumis? Ou est-ce important aussi longtemps que le champ caché associé est soumis?

Ou existe-t-il une meilleure façon de faire cela (un style de remplacement?) Sans modifier le fichier tag-it lui-même?

Merci,

doug

Answer 1

dans la balise-it.js j'ai remplacé cette ligne:

this._tagInput = $('<input type="text"').addClass('ui-widget-content'); 

avec ceci:

this._tagInput = $('<input type="text" readonly="readonly"/>').addClass('ui-widget-content'); 

ajoutant readonly = "lecture seule" attribut. Cela a eu l'effet escompté d'empêcher la saisie, tout en permettant aux utilisateurs de supprimer les tags auto-générés inappropriés.

Answer 2

J'ai eu la même question que l'original op. Mais comme la question date de 2 ans et demi, la version tag-it est modifiée. La réponse acceptée doit être mis à jour pour la folowing dans

tag-it.js autour de la ligne 478:

de:

 if (this.options.readOnly){ 
      tag.addClass('tagit-choice-read-only'); 
     } 

Pour:

  if (this.options.readOnly){ 
      tag.addClass('tagit-choice-editable'); 
      // Button for removing the tag. 
      var removeTagIcon = $('<span></span>') 
       .addClass('ui-icon ui-icon-close'); 
      var removeTag = $('<a><span class="text-icon">\xd7</span></a>') // \xd7 is an X 
       .addClass('tagit-close') 
       .append(removeTagIcon) 
       .click(function(e) { 
        // Removes a tag when the little 'x' is clicked. 
        that.removeTag(tag); 
       }); 
      tag.append(removeTag);    
     } 

Answer 3

Ceci est sous la documentation de git repository ayant le documentation, dans la section Propriétés:

$ ("# myTags"). Data ("ui-tagit"). TagInput.addClass ("fantaisie"); // De toute évidence si vous voulez faire quelque chose avec classe ...

Cela se traduit par la solution pour ce ci-dessous, dans mon style de mise en œuvre personnelle, et probablement la seule façon que je pouvais obtenir ce travail:

$("#myTags").data("ui-tagit").tagInput.prop('disabled' , true); 

C'est si j'ai bien compris votre question. Remarque: ReadOnly ne rend pas les tags non modifiables.

En ce qui passe par les balises, vous pouvez utiliser ..

var x = $("#myTags").tagit("assignedTags"); 

Faire comme un champ de saisie, et qui assure son « singleFieldNode » qui signifie balises sont , (virgule) séparés.De cette façon, vous pouvez l'analyser (diviser pour les virgules (,) dans un objet, ou comme vous voulez le faire)

PS: Pour appliquer l'un des extraits ci-dessus, il suffit de passer à la "id" du HTML élément qui contient TagIt, et votre code fonctionnerait correctement. JQuery TagIt v2.0