Forum Discussion
Remove red squiggles for spellcheck on text entry.
I'm using the following code to add a scrollbar to a lengthy text entry box, and I want to add code so that red squiggles for spellcheck don't appear. How do I do that?
const TextAreaScrollbar = () => {
const textAreas = document.querySelectorAll('.acc-textinput');
textAreas.forEach(textArea => {
textArea.style.scrollbarWidth = 'thin';
});
};
setTimeout(TextAreaScrollbar, 100);
5 Replies
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?
