Help on how to show/hide 'help text' when an Input has focus?

Wappler General
1

Hey All,

I’m sure its possible, at least with some custom JS. But hoping to do it in Wappler nativley. I’can’t quiote get this to work, at least not in the UI.

I want to only show the ‘help text’ on an input field when that input field has focus. I’ve tried a few things but can’t get the right syntax even if its possible.

Here is a sample form group:

<div class="form-group">

    <label for="inp_nightlyRaise">Shift allowance</label>
    <input type="text" class="form-control form-control-sm" id="inp_nightlyRaise" name="nightlyRaise" dmx-bind:value="sc_summary.data.populate[0].nightlyRaise"
    aria-describedby="inp_nightlyRaise_help" placeholder="Rate">

        <small id="bs4-form-group-help1" class="form-text text-muted">Enter as a decimal, i.e. 1.2 is a 20% shift allowance</small>

</div>

Any ideas?

2

The help text should be able to be shown when the input field has the focus, such as:

<small id="bs4-form-group-help1" class="form-text text-muted" dmx-show="inp_nightlyRaise.focus">Enter as a decimal, i.e. 1.2 is a 20% shift allowance</small>

Maybe @George can throw some light on this.

3

Thanks Ben,.

I have tried that though, at least similar and have now tried exactly as you mentioned but it doesn’t work unfortunately.

<small id="bs4-form-group-help1" class="form-text text-muted" dmx-show="inp_nightlyRaise.focus">Enter as a decimal, i.e. 1.2 is a 20% shift allowance</small>
4

Hi,

There is no FOCUS state exposed for an input by Wappler. But, there is a focus event.
Its a bit elaborate, but you can try this:

  1. Create a variable (varFocusedInput) to store something to identify current focused field. Eg: say inp_nightlyRaise = 4.
  2. On dynamic event focus of the input, set the varFocusedInput to 4.
  3. Set the help text’s dmx-show condition to varFocusedInput.value == 4.

On page load, or form load or form submit, when there is no input focused… OR on blur dynamic event of inputs - make sure to reset varFocusedInput to say -1 so that none of the help texts show up.

5

Hmmmm thanks for that…does some quite long winded.

Is there a pure JS option? I might look into it

6

You can use static Focus event, pass this to the JS function you create, and make the next sibling element visible.

7

Why not use the placeholder for this:
<input id="text1" name="text1" type="text" class="form-control" placeholder="Enter as a decimal, i.e. 1.2 is a 20% shift allowance">

8

Normally I wouldn’t bother with the help text, but in this instance it’s inline with best UX practices to use it for this form as it’s fairly complex and requires specific input/validation… I just don’t want the help text to clutter the form unless the input is focused.

I could also use validation/error text but I’d prefer to use the help text on focus

10

Using focus/blur event and jQuery.

<div class="form-group">

    <label for="inp_nightlyRaise">Shift allowance</label>
    <input type="text" class="form-control form-control-sm" id="inp_nightlyRaise" name="nightlyRaise" dmx-bind:value="sc_summary.data.populate[0].nightlyRaise"
    aria-describedby="inp_nightlyRaise_help" placeholder="Rate" onfocus="$(this).next().show()" onblur="$(this).next().hide()">

        <small id="bs4-form-group-help1" class="form-text text-muted">Enter as a decimal, i.e. 1.2 is a 20% shift allowance</small>

</div>

Pure css solution

input:not(:focus) + small { display: none; }
2 Likes