Forum Discussion

Jenny_ED's avatar
Jenny_ED
Community Member
4 months ago
Solved

Limiting Text Entry to One Character Issue

Hello everybody!

As I work on a crossword puzzle, I would like to limit the text entry fields to only contain one character.

Previously, in 2023, I have succeeded doing it using the JavaScript code down below, and it worked perfectly. Yet, when I tried to use it again, it doesn't seem to be working. Even when I opened my old project from 2023 and republished it again as a test or previewed in storyline it doesn't work anymore either.

I'm wondering if this is happening because there's some issue with storyline, maybe it has to be done differently now? Does anyone have an idea or have met and overcome the same issue?

Thanks.


Here's the JavaScript code somebody here suggested, that I used in my previous projects :

var elements = document.getElementsByTagName("input");

for (var i = 0, element; element = elements[i++];) {

element.setAttribute('maxlength', 1);

element.setAttribute('autocomplete', 'off');
}

  • Try

    const Inputs = () => {
      const inputs = document.querySelectorAll('.acc-textinput');
        inputs.forEach((input) => {
        input.setAttribute('maxlength', '1');
        input.setAttribute('autocomplete', 'off');
      });
    }
    setTimeout(Inputs, 100);
    

     

  • LesB's avatar
    LesB
    Community Member

    Please let me know how I can return the favor. Thanks!

    • Nedim's avatar
      Nedim
      Community Member

      Find the attached .story file. Let me know if you need further assistance. Feel free to contact me at my private email address nedim.ramic@gmail.com so we don't clutter this topic. I appreciate your offer to return the favor. I'm here simply to assist and contribute whenever I can. It would be great if you could recommend me or my work to others, as I’m often available for additional projects.

      • LesB's avatar
        LesB
        Community Member

        Much appreciated! I'll definitely recommend you and return to you if/when I need your service.

        I'll move this new topic now. Hopefully it'll be done properly. Enjoy your holidays!! 

  • Nedim's avatar
    Nedim
    Community Member

    Try

    const Inputs = () => {
      const inputs = document.querySelectorAll('.acc-textinput');
        inputs.forEach((input) => {
        input.setAttribute('maxlength', '1');
        input.setAttribute('autocomplete', 'off');
      });
    }
    setTimeout(Inputs, 100);
    

     

    • LesB's avatar
      LesB
      Community Member

      I have an advanced developer who is helping me to limit the characters.

      He tried this and other suggestions but it only works for 1 entry box on a slide. 

      I have multiple slides with up to 3 entry boxes on each slide. Suggestions? Thanks 

      • PeterBeare-a150's avatar
        PeterBeare-a150
        Community Member

        This code was very useful- thanks! - but I also found that it only restricted the first text field on the slide. By replacing the JavaScript arrow function with a traditional function, it now seems to limit all the text-fileds (although the uppercase transform does not work).

        function LimitInputs() {
          const inputs = document.querySelectorAll('.acc-textinput');
          inputs.forEach(function(input) {
            input.setAttribute('maxlength', '1');
            input.setAttribute('autocomplete', 'off');
            input.style.textTransform = 'uppercase';//doesn't work
          });
        }
        setTimeout(LimitInputs, 100);
        LimitInputs();