检测输入元素的属性（类型）变化[关闭]

【问题标题】：Detect attribute(type) change of input element [closed]检测输入元素的属性（类型）变化[关闭]
【发布时间】：2021-06-17 12:31:33
【问题描述】：

如何在 Java Script 或 jquery 中的检查中限制将输入类型密码更改为文本。如果有人尝试在开发者菜单中打开输入类型密码元素并尝试将类型从密码更改为文本，这会使密码出现在文本框中。

如果我们可以检测到任何可能起作用的属性更改，但我不确定如果我们从开发人员菜单中进行更改是否会起作用。

【问题讨论】：

假设“检查中”是指 devtools 中的 DOM 查看器，那么您不能 - 您无法阻止用户更改客户端上有关 DOM 的任何内容。这就是为什么在服务器端执行所有安全和业务逻辑验证至关重要的原因。在客户端验证的任何事情都应该纯粹是为了方便用户，而不应该依赖于数据完整性。

标签： javascript html jquery security passwords

【解决方案1】：

这是一个有趣的问题，在 javascript 中，我们没有任何直接的方法可以检测 javascript 中的类型或属性变化。我有同样的问题，然后经过一些研究，我发现这可以通过突变观察者来完成。在这段代码中，我为 HTMLElement 创建了一个扩展方法，我们所要做的就是获取该 HTMLElement 的引用并调用此扩展函数并传递回调，我们希望在属性更改时运行该回调。

HTMLElement.prototype.onAttributeChange = function (c) {
    let observer = new MutationObserver(c);
    observer.observe(this,{attributes:true});
};
var elem=document.getElementById("txtpassword");
elem.onAttributeChange(function(){
        alert("attribute changed");
});

<html>
    <title> 
    </title>
    <head>
    </head>
    <body>
        <input type="password" name="password" id="txtpassword" >
        
    </body>
</html>

【讨论】：