如何防止输入被禁用？答案

【问题标题】：How to prevent an input from being disabled?如何防止输入被禁用？
【发布时间】：2020-05-11 15:43:59
【问题描述】：

我有一个 ID 为 my-field 的输入字段 <input>，一些插件在第一次转义后添加了属性 disabled="disabled"。

这是一个问题，所以我尝试使用下面的代码使禁用的属性远离它：

var input = document.getElementById("my-field");
document.addEventListener("change", input, function(){
    setTimeout(function() {
        input.disabled = false;
    }, 50)
});

但它不起作用，我做错了什么？

编辑：如下所示，我将布尔值更正为没有“”，但它不起作用。

【问题讨论】：

string 值 "false" 与 boolean 值 false 不同。
已更正，谢谢，但它不工作，它也抛出了关于 eventListener 第二个参数的错误，所以我把输入变量放在那里，仍然没有运气
addEventListener() API 不能这样工作。您将侦听器直接添加到元素。您上面所拥有的是您如何使用 jQuery，排序，并且您将 jQuery 作为标签包含在问题中。如果你不是真的使用 jQuery，你应该删除标签。
对了，好久没用js写代码了，jquery版本搞糊涂了，你说的没错我不能用jqeury我去掉标签

标签： javascript html disabled-input

【解决方案1】：

你可以这样设置

原版Javascript

// Enable
document.getElementById("my-field").disabled = false;

// Disable
document.getElementById("my-field").disabled = true;

jQuery

// Enable
$("#my-field").prop( "disabled", false );

// Disable
$("#my-field").prop( "disabled", true );

【讨论】：

.prop 也适用于原版吗？因为我现在没有 jquery
为你添加了原版解决方案
不起作用，它与我的解决方案相同，但布尔值上没有“”，正如上面@Pointy 建议的那样
如果您的问题是覆盖其他插件禁用输入，那么您应该在事件侦听器外部编写setTimeout，因为如果输入被默认禁用，输入更改事件将永远不会被触发

【解决方案2】：

如果你只是想删除属性，使用removeAttribute函数如下：

document.querySelector('#my-field').removeAttribute('disabled')

至于您的解决方案，我建议您聆听元素的更改，而不是猜测超时，如下所示：

new MutationObserver(([{ attributeName, target }]) =>
        attributeName === 'disabled' && target.removeAttribute('disabled')
    ).observe(document.querySelector('#my-field'), { attributes: true });

【讨论】：

用 getElementById 代替 querySelector 试过了，没有运气
@NathanBernard 函数“getElementById”，除了它的名字更长、更麻烦之外，不是通用的，它只引用 ID。如果要使用包含类或属性的选择器，则需要替换整个函数。 “querySelector”的情况下，控制更方便，只需要替换选择器。
您使用 Observer 的解决方案应该可以直接使用吗？因为我试过但没有用（我显然在查询选择器中设置了正确的#id）。谢谢
@NathanBernard 看，您将请求的元素作为参数传递给它。如果这个元素还没有在 DOM 中，那么当然什么都不会发生。如果这个document.querySelector('#my-field') 返回null，它将不起作用。
这就是为什么我使用了 .addEventListener("change", input, [...]我猜它是香草的

【解决方案3】：

$("#my-field").removeAttr("disabled"); document.getElementById("my-field").removeAttribute("disabled")

【讨论】：

【解决方案4】：

使用 jquery 解决你的问题

对于启用： $("#element").prop("禁用", false);

对于禁用： $("#element").prop("禁用", true);

【讨论】：

【解决方案5】：

尝试在输入中重新定义 setAttribute 方法和 disabled 属性，类似于：

function removeDisabled(input) {
    input.disabled = false;
    input.removeAttribute('disabled');
    Object.defineProperties(input, {
        disabled: {
            get: function() { return false; }
        },
        setAttribute: {
            value: function() {}
        }
    })
}

removeDisabled(document.getElementById('my-field'))

【讨论】：