Disable spellcheck and autocomplete globally in a HTML document?

Question

It's possible to disable spellcheck or autocomplete on individual input elements by adding the tags spellcheck="false" or autocomplete="off" to that element.

But for those who would like to disable it globally across the entire DOM, is there a way to do this using vanilla javascript or HMTL (accounting for the fact that new input elements may be created over the lifetime of the page)?

Will P. · Accepted Answer · 2017-11-10T17:07:56.170

4

In vanilla javascript, one option would be to iterate all the inputs on the page and apply the necessary attribute, something like this:

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

For a more dynamic situation where you're unable to control the creation of new inputs, a mutation observer could be used to apply the desired attributes to dynamically created:

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>

edited Nov 10 '17 at 17:07

answered Nov 10 '17 at 16:30

Will P.

8,437
3
36
45

Apologies. I should've mentioned that the solution should account for the creation of new input elements over the lifetime of the page. I've updated OP to reflect this. – sookie Nov 10 '17 at 16:48
If inputs are being created, that process should be including any attributes the page needs to function. If you have no control over these elements being created, a [MutationObserver](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver) could be used on the body to trigger an event when the element is added and append any needed attributes – Will P. Nov 10 '17 at 16:54
Or event delegation – mplungjan Nov 10 '17 at 16:57
1

I've chosen this as best answer as it deals with more complex situations better. For instance, I was using `react-rte` (rich text editor) which doesn't use any input/textarea elements. The spellcheck property is instead on a `
`. I used my `MutationObserver` to observe any modification to `spellcheck` attributes on elements (using `subtree`, `attributes` and `attributeFilter` options) which will work for my rich text editor as well as any other input elements that I might add in the future
– sookie Nov 13 '17 at 11:42

mplungjan · Answer 2 · 2017-11-10T17:02:02.447

1

To handle dynamic elements, try this

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

Else loop:

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

edited Nov 10 '17 at 17:02

answered Nov 10 '17 at 16:30

mplungjan

169,008
28
173
236

`false` should be `"false"` when using `setAttribute()` – Scott Marcus Nov 10 '17 at 16:36
Apologies. I should've mentioned that the solution should account for the creation of new input elements over the lifetime of the page. I've updated OP to reflect this. – sookie Nov 10 '17 at 16:48
@ScottMarcus There is no longer any setAttribute in the answer – mplungjan Nov 10 '17 at 16:51
@sookie Rather than the `focus` event, which may fire quite a bit, therefore firing this code excessively, DOM Mutation Observers are really the way to go. – Scott Marcus Nov 10 '17 at 17:18
Except the event listener is supported by more browsers – mplungjan Nov 10 '17 at 17:27
Mutation Observers are widely supported - even in IE 11. – Scott Marcus Nov 10 '17 at 17:59
But not < 11 and not fully in Edge. I no longer support IE8, but there are many 10s out there – mplungjan Nov 10 '17 at 18:02

score 0 · Answer 3 · answered Nov 10 '17 at 17:15

To be able to handle dynamically created elements, you should use DOM Mutation Observers, which can monitor a DOM node for changes and fire a callback at that point:

// 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"));

Disable spellcheck and autocomplete globally in a HTML document?

3 Answers3