Storyline Mobile: Number Pad (Code and sample file)

Recently in the G+ Articulate Storyline Group David Carollo asked about forcing the number pad for data entry on mobile devices.

This is something most mobile applications and sites have started doing. It makes sense; save the user time by opening the keyboard they need.

But Storyline doesn't seem to follow this model. In fact all data entry fields in Storyline's HTML5 output are 'text'.

I tried a few methods and found a solution:

  • First we use jQuery to find all the input fields on the screen. 
  • Then we alter each field that SL has designated for numeric entry. 
  • For each field we add an expected text pattern, change the type to number, and override any non-numeric entry.

I put all this into a few lines of JavaScript so that we run it with JavaScript trigger at the beginning of any slide we want to. You can grab the code from my blog here.

Something to note is that most desktop browsers will add a 'spinner' to field. Users will be able to click up/down to add/subtract the number.

You can test it on your mobile device here.

Download my sample story file here.;

Watch the video to hear a more detailed explanation.

3 Replies
Ashley Terwilliger

Hi James,

A numeric entry should be able to accept numeric values being typed in, but I do know that there is an issue reported to our QA team currently in regards to viewing the content in the HTML5 output on a tablet accepting text in a numeric entry where it shouldn't. This thread is a bit older, so I also suspect it was created for Storyline 1 not Storyline 2, and therefore we wouldn't support Storyline 1 on  Android