Skip to main content
Participating Frequently
August 19, 2015
Question

Text entry box pause breaking javascript function.

  • August 19, 2015
  • 2 replies
  • 568 views

Hey Everyone,

We're making the jump from producing our content in Captivate 4 flash files to now producing in Captivate 8 with an HTML 5 output. As you can imagine we've had to make a lot of changes - previously we used a lot of 3rd party widgets to accomplish things like cursor changes, etc.. I've been able to replicate most of them using javascript - however, I'm stumped with this current problem.

In our projects we often have our users press the tab key to simulate what it's like to use our software - this worked completely fine when we produced to flash files - but I'm learning that HTML 5 has a few hiccups with the tab key. It likes to cycle between the Text Entry Input we've created, as well as the address bar at the top of the browser. I created a function in javascript that would return focus to the text entry field on blur and it works great up until the pause occurs in the Text Entry Box, after which it stops working. I just have the function defined and called using the slide's "On Enter" and "Execute JavaScript" option. I've never had any problems with pauses before. If I go into the browser's console and call my function again it continues to work - is there a way to call this function when this slide pauses? or does anyone know of any other workaround?

Thanks,

Hunter

    This topic has been closed for replies.

    2 replies

    Participating Frequently
    August 21, 2015

    I ended up looking through the Captivate API documentation and just wrote up my own event listener. I finally got it to work! For anyone interested my code is

    window.addEventListener("moduleReadyEvent", function(evt)

    {

        var interfaceObj = evt.Data;

        var eventEmitterObj = interfaceObj.getEventEmitter();

    });

    if(window.cpAPIInterface)

    {

        if(window.cpAPIEventEmitter)

        {

            window.cpAPIEventEmitter.addEventListener("CPAPI_MOVIEPAUSE",function(e){

             $("#Text_Entry_Box_4_inputField").blur(function(){

               $("#Text_Entry_Box_4_inputField").focus();

              })

        

         });

        }

    }

    Thanks for tipping me off to the MOVIEPAUSE event, that led me to the right answer.

    TLCMediaDesign
    Inspiring
    August 19, 2015

    What is the code you are using to throw focus back to the TEB?

    You can add an event listener for the MOVIE.PAUSE with an enter slide listener.

    var interfaceObj;
    var eventEmitterObj;

    window.addEventListener("moduleReadyEvent", function(evt)
    {
    interfaceObj = evt.Data;
    eventEmitterObj = interfaceObj.getEventEmitter();
        initializeEventListeners();
    });

    function initializeEventListeners()
    {
    if ( interfaceObj )
    {
         if ( eventEmitterObj )
      {
             eventEmitterObj.addEventListener("CPAPI_SLIDEENTER",function(e){  
       setPauseListener();
                });
      }
    }
    }

    function setPauseListener()

    window.cpAPIEventEmitter.addEventListener("CPAPI_MOVIEPAUSE",function(){setFocus();});
    }

    function setFocus()

    //focus code here
    window.cpAPIEventEmitter.removeEventListener("CPAPI_MOVIEPAUSE",function(){setFocus();});
    }

    Participating Frequently
    August 19, 2015

    I appreciate the quick reply! I'm using Jquery to reset the focus - my code is

    $("#Text_Entry_Box_1_inputField").blur(function(){

        $("#Text_Entry_Box_1_inputField").focus();

    })

    I tried my code in your setFocus function there and it is having the same problem - it works right up until the TEB pauses.

    TLCMediaDesign
    Inspiring
    August 20, 2015

    Just try setting the focus without binding an event. I don't think yours works because focus is already lost.

    document.getElementById("answer_1_inputField").focus();

    This works for me when the timeline is paused by the TEB.