Delaying Mobile Devices' soft Keyboard from opening

[Jeff-PA]

Using Captivate 8. Have numerous text entry boxes. These work fine on the computer, but on Tablet and phone the soft keyboard pops up automatically covering up important information.

I've already shifted the text entry trigger till later in the slide (but this prevents type ahead) to allow more of the content to be visible for a while longer, but I'd like the keyboard to remain closed until the user actually clicks in the text entry box.

I suspect this is simple to setup but I have not been able to find an answer or a "control" to prevent this from happening.

[BV17152383]

Hey there. I submit this feature to Adobe to allow an option to not have text-entry boxes auto-focus a couple weeks ago. It feels like a very big oversight and something standard that should be an option since its a bit jarring to enter a slide and have the virtual keyboard jump out at you. I've applied a work-around in the meantime that works maybe 80-90% of the time. I haven't been able to get it to work in every instance.

I set a timer to trigger @ 250ms onEnter Slide that reshifts the focus to something else on screen. It looks something like this:

var myTimer = setTimeout(setFocus, 250);
function setFocus(){$("#myOtherObjectNameThatsNotTheTEB").focus();}

You may see a slight graphic twitch/stutter if there's an icon on the device that appears when the virtual keyboard opens, but it basically closes it, before it has the chance to completely open and be visual. Like I said, its not as reliable as I'd like it to be. I've tried different methods of when to apply this, and different lengths of time on the timer, and this is about as good as I've been able to get.

I'm using C2017, so maybe some of this will/wont apply to your situation, but a couple things to note, I've come across bugs related to TEB's. On Android devices, if users are using the playbar navigation (or at least have it still on screen), and they tap the back key to close the virtual keyboard, the playbar never comes back on screen. If they rotate their device, the playbar will come back. Not as big an issue, if you're forcing gestures on mobile and dont allow the playbar to be visible.

The other issue, if you 'disallow landscape mode' in the Publish Settings, and open the virtual keyboard while in portrait mode, for some reason, on my Android device, it thinks its in landscape mode, shows the message I applied, and doesn't allow me to type. I can't really get the screen to get back to where it was from there. I reported that to Adobe as well.

Hopefully this will help in your Captivate journeys! Good luck.

[BV17152383]

Update ***

So, I was able to address the auto-focus issue. You have a couple options - not sure how comfortable you are with editing program files. But the code that triggers the auto-focus can be found in the CPM.js file. Yours may differ from mine, since I'm using C2017, but the line is: (this.inputField = document.getElementById(b.n + "_inputField")) && this.inputField.focus()

The CPM.js file, unfortunately gets created AFTER you publish, however you can load an external javascript file AFTER the CPM.js loads, that contains the same function, in order to over write it.

You can comment out the code above; however, this will affect desktop auto-focus as well (which feels hit or miss anyhow).

Alternatively, you can check the user OS with this cpInfoMobileOS to see if its desktop (returns 0) or another OS, and remove it only from the ones you don't want it to auto-focus on.

If I can figure out how to fix the other bugs, I'll be in good shape!

[Jeff-PA]

Thanks for the insightful information Brando. I'll take a look at your suggestions and let you know how I make out.BTW: I'm OK with modifying code and perhaps the Captivate template can just be changed so it grabs a modified file when publishing.

[wilfredi67854289]

Hi,

How are you overwriting the function in an external javascript file.  I have an external javascript file providing accessibility fixes and it is loaded at the end of the HTML file.  In the JS file, this is how I am trying to override the autofocus:

function initializeEventListeners(){

   //check if window.cpAPIInterface is available

   if(interfaceObj){

   //check if window.cpAPIEventEmitter is available

   if(eventEmitterObj){

   //add a listener to CPAPI_SLIDEENTER event

   eventEmitterObj.addEventListener("CPAPI_SLIDEENTER",function(e){

   //code of stuff that need to be performed on event.

   this.inputField = function(){};

  });

  } 

  }

}

It's not working for me.  Any insights on how to make this work?

Thanks,

Wilfred

[BV17152383]

The CPM.js has some standard functions in there it uses for some functions - and they are consistently the same. I copied the function from the CPM.js into a new .js file, and modified it. As long as it loads AFTER the CPM.js, and the function name stays the same, it'll overwrite what the original function does.

I'm not sure if your method will work because certain functions fire after specific events. You may find yourself fighting several event functions that Captivate creates. Its been a while since I looked at this code, but I think the text entry box focus may trigger anytime the screen orientation changes. I also recall the focus code triggering anytime the timeline is actively playing. It was really annoying.

The 1150 or so line block of code I modified from the CPM.js looks something like this:

(function(a) {

    a.Timeline = function(b) {

          ... other misc 1000+ lines of code ...

})(window.cp);  <-- (ends with this)

If you open any CPM.js created by the version of Captivate you're currently using, beautify it and search for this line:

(this.inputField = document.getElementById(b.n + "_inputField")) && this.inputField.focus()

From there you can grab the entire block of code starting with the ' (function(a){ ' I noted above, and modify it however you need. Hope this helps clarify.