Button appears when the focus is on the input

Using JavaScript with Hype
1

I have an input form, and I want the clear text buttons to appear only when the focus is on the respective field.

Is it possible to change the position of an element based on whether the focus is on another one?

Piloto.hype.zip (52.4 KB)

2

I probably would try it this way:

onSceneLoad start ‘initInputFields’. This function assigns a focus event listener to all input fields. What it does exactly - please look at the comments.

Your input field code should look like this:

<fieldset>
<input type="text" name="nome" required="" value="" class="entraDados" placeholder="Nome">
</fieldset>

<fieldset>
	<input type="text" name="cpf" required="" value="" class="entraDados" placeholder="CPF">
</fieldset>

<fieldset>
<input type="text" name="email" required="" placeholder="Email" value="" class="entraDados">
</fieldset>

Give the buttons two class names: the first corresponds to the name of the respective input field (nome, cpf, email), the second is 'but' for all of them.

Give the element to be moved the class name 'movingElement' (hope, I understood this requirement correctly... :thinking: ) and your done.

Piloto_kt.hype.zip (46.7 KB)

2 Likes
3

Thanks it works perfectly!
Do you have any Patreon or other way to contribute and support you?

1 Like
4

Hello Paulo!

I’m glad the script works. And – no – no Patreon or anything like that. This forum is based on reciprocity – I’ve learned so much here from other forum participants that I’m happy when I get the chance to help others move forward a bit (besides, I usually learn something myself in the process as well...).

Best regards

1 Like
5

Ok, thanks again for the quick and accurate solution!