如何配置jQuery Tagit仅允许点击预设标签，禁止手动输入

我来帮你搞定这个问题！Tagit组件确实会覆盖原生的disabled属性，因为它会把你原来的输入框隐藏，生成自己的交互输入元素。不过有两个可靠的方法可以实现你要的“仅允许点击预设标签添加”的需求：

方法1：使用Tagit内置配置（推荐） #

大多数Tagit版本都支持allowManualInput配置项，默认是true（允许手动输入），把它设为false就能直接禁止手动输入，同时不影响通过API添加标签的功能。

你只需要在初始化Tagit的时候加上这个配置即可：

$(document).ready(function(){
  // 初始化Tagit并禁用手动输入
  $("#myTags").tagit({
    allowManualInput: false, // 核心配置：禁止手动输入
    // 这里可以添加你需要的其他Tagit配置，比如标签分隔符、最大标签数等
  });

  // 点击预设标签添加到Tagit
  $(".super_tag").click(function(){
    var super_tag = $(this).text();
    $("#myTags").tagit("createTag", super_tag);
  });
});

这个方法最简洁，也符合组件的设计逻辑，优先推荐使用。

方法2：拦截输入事件（兼容旧版Tagit） #

如果你的Tagit版本没有allowManualInput选项，可以直接针对Tagit生成的输入框做处理：阻止键盘输入、粘贴操作，并设置为只读状态。

$(document).ready(function(){
  // 初始化Tagit
  $("#myTags").tagit();

  // 禁用手动输入的交互
  $(".tagit-input")
    .prop("readonly", true) // 设置为只读
    .on("keydown paste", function(e){
      e.preventDefault(); // 阻止键盘输入和粘贴操作
    });

  // 点击预设标签添加到Tagit
  $(".super_tag").click(function(){
    var super_tag = $(this).text();
    $("#myTags").tagit("createTag", super_tag);
  });
});

为了让用户更直观地知道输入框不可用，还可以加一点CSS样式：

.tagit-input[readonly] {
  background-color: #f5f5f5;
  cursor: not-allowed;
}

这两种方法都不会影响你点击预设标签添加标签的功能，因为createTag API是直接操作组件数据的，不受输入框状态的限制。

内容的提问来源于stack exchange，提问作者HDer