在 HTML 文档中全局禁用拼写检查和自动完成？答案

【问题标题】：Disable spellcheck and autocomplete globally in a HTML document?在 HTML 文档中全局禁用拼写检查和自动完成？
【发布时间】：2018-04-23 22:36:30
【问题描述】：

可以通过将标签 spellcheck="false" 或 autocomplete="off" 添加到单个输入元素来禁用拼写检查或自动完成。

但是对于那些想要在整个 DOM 中全局禁用它的人来说，有没有办法使用 vanilla javascript 或 HMTL 来做到这一点（考虑到新的输入元素可能会在页面的生命周期内创建）？

【问题讨论】：

标签： javascript html autocomplete spell-checking

【解决方案1】：

在 vanilla javascript 中，一种选择是迭代页面上的所有输入并应用必要的属性，如下所示：

var inputs = document.getElementsByTagName("input");
for(var i = 0; i < inputs.length; i++){
    inputs[i].setAttribute("spellcheck", "false");
}

对于无法控制新输入的创建的更动态的情况，可以使用突变观察器将所需的属性应用于动态创建的：

window.addInput = function(){
  var container = document.getElementById("container");
  var input = document.createElement("input");
  input.setAttribute("type", "text");
  container.appendChild(input);
  container.appendChild(document.createElement("br"));
}

//MutationObserver docs: https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver
var observer = new MutationObserver(function (e){
  for(var i = 0; i < e.length; i++){
    for(var j = 0; j < e[i].addedNodes.length; j++){
      if(["INPUT", "TEXTAREA"].indexOf(e[i].addedNodes[j].tagName) > -1){
        e[i].addedNodes[j].setAttribute("spellcheck", "false");
        console.log("attribute set")
      }
    }
  }
}).observe(document.getElementById("container"), {childList:true});

<button onclick="addInput();">
Add Input
</button>

<div id="container">

</div>

【讨论】：

道歉。我应该提到，解决方案应该考虑在页面的生命周期内创建新的输入元素。我已更新 OP 以反映这一点。
如果正在创建输入，则该过程应包括页面运行所需的任何属性。如果您无法控制正在创建的这些元素，则可以在主体上使用 MutationObserver 在添加元素时触发事件并附加任何需要的属性
或事件委托
我选择了这个作为最佳答案，因为它可以更好地处理更复杂的情况。例如，我使用了react-rte（富文本编辑器），它不使用任何输入/文本区域元素。拼写检查属性位于<div>。我使用MutationObserver 观察对元素上spellcheck 属性的任何修改（使用subtree、attributes 和attributeFilter 选项），这将适用于我的富文本编辑器以及我可能使用的任何其他输入元素以后添加

【解决方案2】：

要处理动态元素，试试这个

document.addEventListener('focus',function(e){
  var elem = e.target;
  if (elem && elem.tagName.toLowerCase()=="input" {
    elem.spellcheck=false;
  }
})

其他循环：

var inp = document.querySelectorAll("input[type=text], textarea");
for (var i=0; i<inp.length; i++){
  inp[i].spellcheck=false;
  inp[i].autocomplete="off";
}

【讨论】：

false 在使用setAttribute() 时应为"false"
道歉。我应该提到，解决方案应该考虑在页面的生命周期内创建新的输入元素。我已更新 OP 以反映这一点。
@ScottMarcus 答案中不再有任何 setAttribute
@sookie 而不是focus 事件，它可能会触发很多，因此过度触发此代码，DOM Mutation Observers 确实是要走的路。
除了事件监听器被更多浏览器支持

【解决方案3】：

为了能够处理动态创建的元素，您应该使用 DOM Mutation Observers，它可以监视 DOM 节点的更改并在该点触发回调：

// Create the mutation observer
var observer = new MutationObserver(function(mutations) {

  // Loop through the mutations
  mutations.forEach(function(mutation) {
  
    // Loop through the mutation record for that mutation
    for (var i = 0; i < mutation.addedNodes.length; i++){
     
      // Cache current node being added
      var n = mutation.addedNodes[i];
      
      // Check node for an input
      if(n.nodeName === "INPUT"){
        // Set properties as desired
        n.setAttribute("spellcheck", "false");
        n.setAttribute("autocomplete", "off");    
        
        // Confirm changes to new element
        console.log(n);
      }
    }
  });
});

// Start observing the <body>
observer.observe(document.body, { childList: true });

// Dynamically add a new input
document.body.appendChild(document.createElement("input"));

【讨论】：