Forum Discussion
Limiting Text Entry to One Character
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
17 Replies
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,
DougThanks, Doug!
I know when coding HTML that you can set a maximum length to an input field. I was thinking along those lines. But I will try this and see how it goes.
This works, but I'm happy with the user experience it provides. I'm still wondering if there is a way to set the maximum length of the input fields/ Maybe when the timeline starts, since it's everything is on one slide.
Hi Dawn, did you ever find the solution to this question? I'm also making a crossword puzzle and I find that the user experience would improve greatly if only one character was allowed.
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.
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);HelloDawn Can you help me, how can I apply this? I've been trying this code by Execute Javascript trigger when timeline starts, but it's not working.
Can You Share the Source File?
Hi v v!
I just wanted to pop in and share that since this discussion is a bit older, Dawn may no longer be subscribed.
If you wanted to reach out to them directly, you can do so by clicking on their name and selecting the 'Contact Me' link.
Have a great start to your week!
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/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.
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');
}Indeed thats the way to do this without jQuery.
For anyone copying and reusing Stephanie's code... keep in mind it gets ALL input elements on the page and loops through them in a for loop.Thak You so much I'ts working
This actually worked, but now I have a question...
How to make it so spaces aren't counted as a character?
Restricting Text Entry Field to only One Character in text entry give me source file
