Limiting Text Entry to One Character

Oct 12, 2018

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

10 Replies
Doug Cush

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

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

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

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/