如何切换Tagify输入框的可编辑与不可编辑状态

嘿，我来帮你搞定这个Tagify的状态切换问题！其实Tagify本身就自带了专门的方法来处理只读/可编辑状态，不用自己瞎折腾DOM属性，我给你把步骤理得明明白白：

首先，你已经初始化好了Tagify实例，直接用它的setReadonly()方法就能快速切换状态，再配合一些细节处理就能完美实现你的需求：

// 注意：这里假设你已经把初始化的tagify实例存在了全局变量里
// 要是没全局存的话，后面我会说怎么从DOM里获取
function setTagifyEditMode(editable) {
    // 核心操作：用Tagify自带的setReadonly方法
    // 因为readonly为true时是不可编辑，所以传入!editable刚好对应我们的参数逻辑
    tagify.setReadonly(!editable);

    // 额外加固：处理原生输入框的状态，防止用户绕过Tagify直接操作底层input
    if (!editable) {
        // 禁用原生输入框
        tagify.input.setAttribute('disabled', 'disabled');
        // 让输入框不能被点击/聚焦，彻底杜绝误操作
        tagify.input.style.pointerEvents = 'none';
    } else {
        // 恢复可编辑状态
        tagify.input.removeAttribute('disabled');
        tagify.input.style.pointerEvents = 'auto';
    }
}

给你拆解一下这段代码的作用：

• tagify.setReadonly(true)会让Tagify直接进入不可编辑状态：用户既不能添加、删除现有标签，也不能在输入框里输入新的标签内容
• 额外处理原生input的属性和样式，是为了彻底堵上漏洞——毕竟Tagify是基于原生input封装的，直接改原生属性可能会让Tagify内部状态混乱，所以双管齐下更稳妥
• 调用的时候也很简单：setTagifyEditMode(true)就是开可编辑，setTagifyEditMode(false)就是锁死不可编辑

要是你之前没把tagify实例存成全局变量，也可以从DOM元素上直接获取，比如：

function setTagifyEditMode(editable) {
    // 先获取到Tagify绑定的DOM元素
    const tagifyElement = document.querySelector('.note-tags');
    // 从元素的tagify属性里拿到实例（Tagify初始化后会自动挂载这个属性）
    const tagify = tagifyElement.tagify;

    // 后面的逻辑和上面一样
    tagify.setReadonly(!editable);
    if (!editable) {
        tagify.input.setAttribute('disabled', 'disabled');
        tagify.input.style.pointerEvents = 'none';
    } else {
        tagify.input.removeAttribute('disabled');
        tagify.input.style.pointerEvents = 'auto';
    }
}

这样不管实例存在哪，都能正确切换状态啦！之前你可能尝试直接改DOM的disabled属性，那样很容易因为Tagify内部状态没同步而出现奇怪的问题，所以优先用官方提供的方法准没错。

备注：内容来源于stack exchange，提问作者abalter