Forum Discussion

NancyHyde-35f43's avatar
NancyHyde-35f43
Community Member
20 hours ago

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

1 Reply

  • Kingman's avatar
    Kingman
    Community Member
    10 hours ago

    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 });