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

Tony Sundell

over 5 years ago10/30/18 at 2:47 pm (UTC)

I have this same problem when using on mobile: the text-field never loses the focus. I can't enter the numeric entry to numeric field by pressing "done/submit" in my phone's keyboard hence the number never gets passed to numeric field.

Tony Sundell

over 5 years ago10/31/18 at 7:00 am (UTC)

I am having this issue with (Moodle based LMS) Storyline 360 on Android. The keyboard does not deactivate regardless of pressing "enter" or "submit" on the keyboard and only way to exit keyboard is to use "back" button in the device. This however does not deactivate the number field hence there's no passing the input into variable either. Pressing "answer" button I've build for the course then gives incorrect results.

Alyssa Gomez
Staff

over 5 years ago10/31/18 at 5:35 pm (UTC)

Hi Tony,

Happy to investigate this with you! Does this problem only happen on Android? Have you had the same experience when testing the output on SCORM Cloud?

We'd love to help you test this, if you don't mind sharing your file here. If there's a bug lurking, we want to know about it!

over 5 years ago11/01/18 at 6:27 am (UTC)

Hey there Alyssa,

Sure, you’ll find the file as an attachment. The course is in finnish, but the interface is simple enough to understand without the given language.
I registered with SCORM Cloud and tested the file there as well alas no luck with this one either. The error repeats itself in SCORM Cloud too.

Error repeats on Android mobile, using Chrome browser. PC Windows 10 with Chrome worked just fine. I have not tested, nor do we have machines to test the material with any Apple products 😊.

Leslie McKerchie
Staff

over 5 years ago11/01/18 at 1:36 pm (UTC)

Thanks, Tony. I see that you were able to reach out to our support team and Anna is helping you out :)

Gretchen Johanson

over 5 years ago11/28/18 at 7:39 pm (UTC)

Hi,

I am having the same issue with the text field on PC. I set the slide trigger to advance when the TextEntry is equal to Learning Goals. I cannot get the slide to advance at all. I have tried it without a submit button and with a submit button; clicking outside the text box after entry, and even hitting the enter button. Nothing happens. I have attached a screen shot of how it is set up. Please advise how to make this work.

text_entry_screen_shot.PNG

Leslie McKerchie
Staff

over 5 years ago11/29/18 at 3:40 pm (UTC)

Hi Gretchen and welcome to E-Learning Heroes :)

Thanks for reaching out and letting us know what you are experiencing in your course.

We've seen some issues with the virtual keyboard on mobile devices, but you mention having the problem on a PC, and it sounds like you are aware of changing the focus out of the text box.

Would you be able to share your .story file for us to take a look? Even a sample project with this slide would be helpful. If you cannot share it here in the forums, you are welcome to share it here privately.

over 5 years ago12/20/18 at 8:32 am (UTC)

Hello everyone,

same problem here: at the beginning of one of our courses we show an entry text that lets the user pick their own name. It used to work until some times ago, but now on mobile we can only write the name. We cannot confirm it and we cannot proceed on the slide.

This being on the very first slide of a project, you can imagine how our client is reacting. We are trying some workarounds, but we'd also like to know what is causing this. Maybe the last update?

Thanks for all the support you can give us.

Leslie McKerchie
Staff

over 5 years ago12/20/18 at 4:20 pm (UTC)

Hello Andrea,

Thanks for reaching out and letting us know what you are experiencing in your course.

Does it sound like the issue that has been reported here where the text entry is not being set, and the virtual keyboard is still present? Is that what you see as well?

Would you be able to share your .story file with our team here as we continue to investigate?

5 years ago01/27/19 at 8:25 pm (UTC)

Hi All,

This still seems to be an ongoing issues, I am on a trial version of Storyline 360 as we use Storyline 3 and there is an issue with Text Entry boxes not working correctly on mobile devices so this was the only way I could get my product out for testing at the time.

I have been pulling my hair out trying to get them to record correctly without closing down the Keyboard and using the JavaScript line Matthew has mentioned has done the job - so thank you for your post, this has really saved us.

Hopefully this could be sorted soon but also hopefully the updates in Storyline 360 can be replicated in SL3 so that the text entry boxes work correctly on mobile devices.

5 years ago01/28/19 at 6:11 pm (UTC)

Thanks for checking in, Aaron. We have this issue open, and we've updated our notes with this information:

On a mobile device, clicking submit directly after entering the text or numeric entry is not allowing the focus to change from the entry field. When the focus doesn't change, the trigger to adjust the entry variable doesn't fire, and the question is evaluated incorrectly.

We are still looking at this behavior, and we'll let you know here about any changes that are released!

5 years ago01/28/19 at 6:23 pm (UTC)

You guys are not so fast....

Nejc Žorga Dulmin

5 years ago01/28/19 at 7:21 pm (UTC)

Aaron, what device is the problem? I just tried this with my iPad and it works fine.

I do have a suggestion for a workaround.

Leslie McKerchie
Staff

5 years ago01/29/19 at 4:38 pm (UTC)

Hi Timo,

I scrolled back through this conversation and I'm not sure we ever nailed down the issue that you were running into.

I wanted to share some information on how we define bugs and how we tackle them when they occur as that sounds like what you may have been referring to in your latest reply.

Daniel Ferreira

almost 5 years ago05/31/19 at 8:28 am (UTC)

I am having the same issue described in the original post.

My Storyline is up to date.

Maybe this was broken in a later version of Storyline?

Leslie McKerchie
Staff

almost 5 years ago06/03/19 at 2:20 pm (UTC)

Hi Daniel,

Thanks for reaching out and letting us know that you're running into a similar issue.

Do you know what version of Storyline 360 your course was published with? I'd be happy to take a look if you'd like to share the zipped published output.

With your permission, I'd like to take a look at your project file to investigate what's happening as well. You can share it publicly here, or send it to me privately by uploading it here. I'll delete it when I'm done troubleshooting.

TUI People Development

almost 4 years ago07/02/20 at 5:26 pm (UTC)

We have the same problem.

I see that it's been more than 3 years, and the problem persists. We need an urgent solution. Mobile learning is on demand, and we can't ask learners to do weird things on the slides to go arorund Articulate's issues.

I attach one example of how this is affecting some of our interactions.

We need the users to press "Send", then show them what they have typed to confirm it's correct (using %varibale%), but it's not working because of the object doesn't lose focus when they press Send on Mobile.

We use Storyline 360 v3.4122450.0

Text-Entry-doesn_t-lose-focus.gif

almost 4 years ago07/02/20 at 10:12 pm (UTC)

Hi TUI,

Thank you for letting us know! I am sorry that you are running into some trouble here with the text entry inputs.

If you can, could I have you share your file with us to help troubleshoot? You can share files using this private link here. We'll let you know our findings and will delete it after having a closer look!

over 3 years ago09/17/20 at 9:51 am (UTC)

Hi Matthew,

This was really helpful.

On thing I noticed is once the JS code is triggered, if the user comes back, let's sey they want to change their answer, the keyboard doesn't appear anymore as the code "document.activeElement.blur()" has removed the focus from the active text entry field.

Do you think there is a way to reverse that when users go back to previous slides to change their answers using the same text entry field?

Salvador Fernandez

3 years ago04/12/21 at 2:48 pm (UTC)

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)

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/

almost 3 years ago05/18/21 at 1:59 pm (UTC)

Thanks for posting this Salvador. I have bookmarked it so I can come back and give it a try on one project that has been giving me grief.

The problem with these workarounds is that sometimes Articulate changes something, and they stop working. Hopefully they will actually fix this problem once and for all. (I can dream, right?)

almost 3 years ago06/08/21 at 2:14 pm (UTC)

This solution worked! Thanks!

"Add an Execute JavaScript trigger to your Submit button (before all other Submit button triggers fire) and run the following JS:

document.activeElement.blur();

This will remove the focus from the active text entry field (closing the mobile keyboard) and therefore commit the text entry to the associated variable prior to the Submit button assessing correct/incorrect."

Matthew Jevons

Leonie Van Renterghem

1 year ago02/13/23 at 10:45 am (UTC)

Hi

I am still having this issue: I want people to fill in their name and then on some slides their name needs to appear. This works on my desktop, but not on my mobile (if I tap on the screen before submitting, the name appears, but not when I submit immediatly).
I haven't tried the JavaScript solution yet, but was hoping that there's an easier solution to it.