Text Entry Field masking within a Scrolling Panel
Sep 28, 2023
I have a Text Entry field within a Scrolling Panel that which after the entry has been completed, i'd like to lock up the field. In the past my way of doing this is to trigger a filled-but-transparent shape to appear over the Text Entry field. However---after a couple hours of attempting to use filled-but-transparent shapes and captions, and even solid images to try to block a Text Entry field within a Scrolling Panel, I am pretty convinced that this is a current limitation within Storyline 360. No matter what type of object I lay over this Text Entry field, in Preview mode I can click right through the object and manipulate the Text as if the object isn't even there. Is it fair to say that Storyline won't allow an object to mask a Text Entry field that's within a Scrolling Panel? Thanks.
6 Replies
Hello Jordan, as far as I understand, are you trying to disable (mask) the text entry field once the text has been entered and preventing the user not to retype the text?
Try the below steps and let me know if that works for you:
1. Initially you can lay over a transparent shape over the text entry field and set it's initial state to hidden.
2. Then add a trigger to change state of that transparent shape to normal when object-text entry looses focus.
If that doesn't work, would you mind sharing your project file here so that I can take and provide you some help?
Hi, yes, I've tried that process with transparent shapes...when that didn't work I experimented with opaque shapes and image files, either of which certainly shouldn't let me "click through" but I'm still able to click through any of these objects and manipulate the Text Entry beneath. I will attach the file here, thank you.
And here's a screen capture of the shape changing state to Normal and without transparency--i colored it orange--and i'm still able to click through it.
Hi Jordan,
Not really sure what is going on here but it appears like the Text Entry is isolated from the scrolling panel when you look at the DOM, like it's in the Shadow DOM but referenced as the read only copy inside the scrolling panel. Not really expert in this topic and probably embarrassing myself but want to help. Technically, in this scenario, the Text Entry will always be on the top of the scrolling panel. I suggest you to use a JavaScript hack to disable the Text Entry when it losses focus.
Hello Jordan, Thanks for sharing the SL file.
I reviewed your file and was able to replicate the same issue at my end. So as I workaround, I added a new layer with a transparent shape. Once the text entry looses focus, this new layer pops out preventing the user to click on the base layer.
If there are any clickable buttons, I suggest you to move them to this layer with the actual triggers.
Let me know if that works for you. I'm attaching the updated file for your reference.
Ah, of course...when all else fails, "add a layer". For my purposes I've triggered the new layer to appear upon the learner's last necessary click within the base layer, and then after 5s the layer triggers the next slide. Thank you very much!