Forum Discussion
Remove red squiggles for spellcheck on text entry.
Typically if you were coding with HTML you'd use something like the following:
<!-- for inputs -->
<input type="text" spellcheck="false">However if you're using JavaScript you'll have to set the spellcheck attribute differently as Storyline nests things in it's own little way.
Try the following, and execute it when timeline starts on the slide.
const disableStorylineSpellcheck = () => {
// Target any input fields Storyline creates
const inputs = document.querySelectorAll('input[data-dv_ref="input"], .slide-object-textinput input');
inputs.forEach(input => {
input.setAttribute('spellcheck', 'false'); // disable browser spellcheck
input.setAttribute('autocomplete', 'off'); // disable autocomplete suggestions
input.setAttribute('autocorrect', 'off');
input.setAttribute('autocapitalize', 'off');
});
};
// Run after slide is loaded (not just DOM)
document.addEventListener('DOMContentLoaded', disableStorylineSpellcheck);
// In case Storyline loads inputs dynamically (e.g., changing slides)
const observer = new MutationObserver(disableStorylineSpellcheck);
observer.observe(document.body, { childList: true, subtree: true });
Thanks for your response, but that code didn't work for me. I still get red squiggles for misspelled words in the text entry box. Does it matter that the misspelled words are pre-populated in the text entry box using the text entry variable?
Hi Nancy,
Ah strange, it worked for me in preview mode.
Preview mode when I test with the above code:Preview mode without the JavaScript code:
This is how I applied it:
The script is definitely executing?
It doesn't work when you pre-populate the text box, at least with multiple lines of text like I am doing. Here is an illustrative storyline file.
Hi Nancy,
Sorry for the delayed response.
I see... I did test this on single line only. I didn't test on multiple lines.
If you haven't figured it out, try and replace the code with the following. It should cover both single and multiple line cases.
(function () { function disable() { document.querySelectorAll( 'input[data-dv_ref="input"], textarea.acc-textinput, textarea.acc-shadow-el' ).forEach(el => { el.spellcheck = false; el.autocomplete = "off"; el.autocorrect = "off"; el.autocapitalize = "off"; }); } // Run immediately disable(); // Re-run whenever Storyline injects or updates slide content new MutationObserver(disable).observe(document.body, { childList: true, subtree: true }); })();