Limiting Text Entry to One Character

Oct 12, 2018

Dawn Friedel
By Dawn Friedel

Hi All,

I'm working on a crossword puzzle and want to restrict the text entry fields to one character.

I'm sure this can be done in JavaScript, but that is a skill I am still working on acquiring. Has anyone done this? Or is there someone with JavaScript knowledge who can guide me in figuring it out?

Thanks,

Dawn

15 Replies
Doug Cush
over 5 years ago10/12/18 at 1:09 pm (UTC)

Hi Dawn,

This may not be the optimal way of doing what you asked, but here's some code which will set the Text Entry Field blank if more than one character is entered ("//" precedes code comments):

var player = GetPlayer(); //get the player
var Letter01 = player.GetVar("Letter01"); //get text entry field variable

if (Letter01.length > 1){ //if the length of Letter01 is greater than 1
player.SetVar("Letter01",""); //reset the variable to hold no value
}

You can add this JavaScript to a trigger, which will execute the script 'When control loses focus' on the Text Entry Field. The downside of this is that users can still enter as many characters as they like - until they click away - and this will display the vertical scroll bar on the Text Entry Field.

Another consideration would be some sort of character validation to ensure that users are only inputting a-z and A-Z, and not numbers or any other special characters.

I hope this is of some help to you!

Kind regards,
Doug

Dawn Friedel
almost 3 years ago05/31/21 at 1:57 pm (UTC)

Hi Selma,

I was able to do it but only using Javascript. There may be a better way by now. I had to define each letter in the puzzle as a variable. Then set the max length for that variable to 1. Here is a link to my puzzle. https://carolinatigerrescue.org/wp-content/games/crossword/story_html5.html

It would be enhanced by adding a popup to say you can only add one character, if you try to enter more than one. Or simply replacing the last character entered. But I'm not goof enough with scripting for that on my own.

Dawn Friedel
almost 3 years ago05/31/21 at 2:01 pm (UTC)

Here is just a snippet of the code I used.

var fields = "1DownLetter1";
(function setMaxChars(fields) {
    fields.forEach(function (field, field_index) {
       $('[placeholder=' + field + ']').attr('id',field);
       $("#1DownLetter1").attr("maxlength","1");
       $('[placeholder=' + field + ']').attr('placeholder', '');
    });
})(fields);

Math Notermans
over 2 years ago08/29/21 at 12:59 pm (UTC)

Dawns solution requires jQuery. Any Javascript code you see with $ signs in it are using jQuery. And as jQuery is not included anymore in Storyline it wont work as is.

To convert jQuery code to Vanilla Javascript ( Vanilla as it doesnot require any 3rd party libraries like jQuery ) you can use this link for reference.
https://tobiasahlin.com/blog/move-from-jquery-to-vanilla-javascript/

Stéphanie DeGrâce
over 2 years ago09/07/21 at 5:24 pm (UTC)

Hi!

From your code, I asked the programmer on the team I work in and we came up with this code and it works.

var elements = document.getElementsByTagName("input");

for (var i = 0, element; element = elements[i++];) {

element.setAttribute('maxlength', 1);

element.setAttribute('autocomplete', 'off');
}

Holly Castellow
1 year ago04/06/23 at 4:24 pm (UTC)

Hey Math, can you inform me of the code to get Dawn's previous jQuery solution to work? I am currently working on a crossword puzzle and want it to function like the one she posted where a learner cannot enter more than one letter. One of the names of my associated variables is DEBIT-D (which is technically the "1DownLetter1" equivalent of Dawn's variable. I would like to test it out with just a sample of what the code for that one letter would look like so that I can set up the rest. Unless there is an easier way. Trying the below code, I experienced being able to enter multiple letters still. Any help would be greatly appreciated! Thanks in advance. 

Sign In to Reply