Text Entry fields not setting when control loses focus in mobile devices (Storyline 360)

Hello folks,

We are currently experiencing a similar issue as the original post of this thread.

The Issue on Mobile Devices:
By default in the latest Storyline program when you create a Text input box it automatically creates and assigns a variable and registers its value when the object loses focus. When you use a text entry object in Articulate Storyline, the text you type in the field does not get registered until the field loses focus. That means you need to click outside the field (for example, on a button) to make the the text entry field losing its focus.

We are reading mixed messages in forums of some users blaming the Keyboard after iOS13,and others are saying it is a bug with Storyline that has not been resolved.

We know for a fact this issue was not present in the June 19, 2018 (Build 3.17.16117.0) because we had our courses QC and iPad issues were not there. We are currently using V 3.38.24 as of 21-4-12.

Our main issue now is the Mobile keyboard is always active, when you tap outside the field we can't get the Save+next button to lose focus. We are testing on iPad using the latest iOS. This does not happen on Desktop.

Solution:

We currently have a solution that involves JavaScript.

What we do is add one extra line after publishing the files (We already reference to JQuery in our index lms)

<script src="/client/name/businessPlan/js/jquery-3.2.1.min.js"></script>

It’s using JavaScript and jQuery (therefore, it won’t work in the mobile app AMP).

It only works on HTML5

JS Code will be placed in your Master slide/Your theme slide, it will not effect anything else:

var p = GetPlayer();
 var placeHolderText;

$(":input").each(function() {
var place = $(this).attr('placeholder');

if (place !== undefined)
{
 placeHolderText = place.split("|");
 if (placeHolderText.length==2)
{
 $(this).data('bd_place',placeHolderText[0]); 
 $(this).attr('placeholder',placeHolderText[1]);
 $(this).bind('input propertychange', function() {

p.SetVar($(this).data("bd_place"),$(this).val());
});
}
}
 });

This also helps you to monitor what the user is typing letter by letter.

This is the screen inside Storyline. It has the intro text. The text entry field. The placeholder text inside the field is important. Normally, it’s just what you want the user to see as a hint. This time, it contains two pieces of information, divided by “|”. The first part is the name of the Storyline variable (in this case, answer), the second is the actual text you want to display for the user.

answer|[Type your text here]

or

answer|[Escriba su texto aquí]

The program will remove the Storyline variable name in our case "answer", so the user won’t see it. However, when the user types in the field, the program will update this variable instantly.

2nd solution not tested:

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.

Resources:

https://community.articulate.com/discussions/articulate-storyline/entry-text-without-losing-focus

https://www.rabbitoreg.com/2018/04/22/articulate-storyline-text-entry-without-losing-focus/