Forum Discussion

ZsoltOlah's avatar
ZsoltOlah
Super Hero
9 years ago

Entry Text WITHOUT Losing Focus

Hi all,

Is it possible to detect/trigger entry text content WHILE the user is typing? And not wait until the box loses focus? 

Here's the scenario: submit button is hidden. Text entry is empty. User clicks in the text entry. Text entry gains focus. But, I don't want to show the button yet, since the content is empty. Now, once the user types in a letter, I want the button to show up. If the user deletes the content (backspace), then I want the button to hide again. Also, people may copy-paste content into the box, so I can't rely on key pressed. Thoughts?

Thanks!

 

  • JillianRae's avatar
    JillianRae
    Community Member

    I thought I'd put this here in case anybody finds it useful. This problem was driving me crazy and I didn't like any of the suggested solutions. I solved it using jQuery because I'm still using Storyline 3, but I'm sure you could achieve the same thing in a slightly more long-winded way with straight javascript.

    I created an Execute JavaScript trigger to run at timeline start:

    $(function() {
      $("input").keyup(function() {
        $(this).blur();
        $(this).focus();
      });
    });

    Basically it causes the active input element to lose focus very briefly after every keystroke, thereby activating the "control loses focus" trigger, to which you can attach any action you like on a case-by-case basis. In theory the split second loss of focus could cause problems but in practice I have yet to experience any.

    Because it works on any unspecified input element you can also put it inside your Slide Master to apply to every slide.

    • JokeHollants-89's avatar
      JokeHollants-89
      Community Member

      Hi Jillian, 

      Wow, this code is really valuable! I have storyline360 and no Javascript writing skills 😉 Do you have any idea how to put this in storyline360? With some reference to a JQuery library perhaps?

      Thanks in advance for your thoughts!

  • Hi Joke, 

    I found the jQuery written by Jillian quite useful and thought I would contribute by writing it in just javascript.  Here is the code:

    let inputs = document.getElementsByTagName('input');

    function fnBlur(e) {
        e.target.blur();
        e.target.focus();
    }

    for (let index = 0; index < inputs.length; ++index) {
        inputs[index].addEventListener("keyup",fnBlur)
    }

  • YaachYaach's avatar
    YaachYaach
    Community Member

    Thanks @Gavin. I used your code slightly different. I created a trigger in my "Next" button, that deactivate (blur) the focus for any input or textareas in my slide.

    I put this trigger on top so that it is executed first before the intended action of the "Next" button which is to go to the next slide.

    • GavinElliott-89's avatar
      GavinElliott-89
      Community Member
      Yaach Yaach

      Thanks @Gavin. I used your code slightly different. I created a trigger in my "Next" button, that deactivate (blur) the focus for any input or textareas in my slide.

      I put this trigger on top so that it is executed first before the intended action of the "Next" button which is to go to the next slide.

      Great! Glad it was helpful. :-)

  • Thanks so much, Matt!! I will definitely need some eyes. Plan to get this out before the ATD conference next year! WooWhoo!!!  

  • YaachYaach's avatar
    YaachYaach
    Community Member

    This is interesting. My use case is because the variables are not set on mobile devices. The input field does not loses focus after pressing my "Next" button on an iPhone 13. This causes my variable (for the input field) to be empty.

    The workaround triggering losing focus and then activating it seems a viable solution, but I was inspecting the DOM of my web build and don't see any input elements for my INPUT fields. I only see textareas.

    How do you target an specific input element? I don't see IDs or classes.

    • GavinElliott-89's avatar
      GavinElliott-89
      Community Member
      Yaach Yaach

      This is interesting. My use case is because the variables are not set on mobile devices. The input field does not loses focus after pressing my "Next" button on an iPhone 13. This causes my variable (for the input field) to be empty.

      The workaround triggering losing focus and then activating it seems a viable solution, but I was inspecting the DOM of my web build and don't see any input elements for my INPUT fields. I only see textareas.

      How do you target an specific input element? I don't see IDs or classes.

      Yeah, it's not possible to target specific IDs in the DOM but it is possible to target all the 'acc-textinput' classes, which is what my code does (see my reply above). Hope that's helpful.