Need Button To appear When Text Is Entered

Dec 18, 2023

Hi,

I need a button to appear after typing some text in a box. I can't get it to appear unless the learner clicks outside of the box. How can I get it to appear after they type a few words?

The slide is a what would you do. With a text entry box they can type their ideas in. Then there is a button that takes them back to the main page. I don't want the button to appear until they type something. I just have the text entry loses focus trigger Set TextEntry to typed value. I can't figure out what next. Any help is appreciated.

Thank you!

7 Replies

Tom Kuhlmann
Staff

4 months ago12/18/23 at 8:56 pm (UTC)

Typing isn't a triggering event. And the variable from the typed text isn't saved until the text box loses focus.

What does work is to have to button disabled or hidden and change the state when the user clicks into text box.

JStar500
Author

4 months ago12/18/23 at 9:35 pm (UTC)

Hi Tom,

Thank you for your reply. I did try hiding the button when the timeline started. Then showing it when user clicks into text box but it still doesn't force them to type anything. I also tried adding a trigger when TextEntry changes set state of button to normal if value does not equal blank. This works but I still have to click out of box to get button to appear. The dream is after a few words the button appears. Any other suggestions?

Tom Kuhlmann
Staff

4 months ago12/19/23 at 4:07 pm (UTC)

There's nothing in SL that forces the person to type anything and the variable itself isn't triggered until the object loses focus.

You could make the assumption that once the person clicks into the box that they're typing. And then add some sort of timed element where the button appears 2 seconds later.

Phil Mayor
Hero

4 months ago12/19/23 at 4:26 pm (UTC)

You should be able to use

let inputs = document.getElementsByTagName('input');




function fnBlur(e) {

    e.target.blur();

    e.target.focus();

}




for (let index = 0; index < inputs.length; ++index) {

    inputs[index].addEventListener("keyup",fnBlur)

}

To blur and refocus the text entry field

https://360.articulate.com/review/content/3c9f4b1e-ca64-42ec-8a89-e3979bd4dcff/review