Focus is not a dynamic attribute for inputs?

Wappler General Need Help
1

Hey Wapplees,

I would like to focus an input when a variable has a certain value.
I thought I could do this with a dynamic attribute, but it seems that inputs do not have focus as a dynamic attribute…

My next thought to work around this would be to dynamically select and focus the inputs when the update event happens on the variable, for example:
var registrationStep = 1;
<input type=‘text’ id=‘input1’>
<input type=‘text’ id=‘input2’>
registrationStep.onChange = function(registrationStep) {
$(’#input+“registrationStep” ').focus();
}

I would like to be able to do this within wappler, is there a way?

or maybe I am approaching it from the wrong direction and there is another way to do this?

2

Would adding a dynamic event to the button like this do what you want:

dmx-on:click="registrationStep.value==1?myform.input1.focus():myform.input2.focus()">

?

3

On second thoughts, I don’t think this will do what you want.

You could create a second variable:
"myform.input" + var1.value + ".focus()"
… and then apply this onclick event to the button:
dmx-on:click="var2.value"

That would be more dynamic.

4

But I have many inputs that I want it to iterate through…
I can do with javascript like I showed above, I’m just wondering if there is a way within Wappler that I don’t know about

5

I may not have understood quite what you need, but using the example in the second reply I gave, you can have any number of inputs - the variable registrationStep could be given any value, corresponding to whatever inputs you have.

6

I dont understand the second reply

7

Here is a simple example. You should be able to paste this into a new, empty page in Wappler and hopefully see what I mean. I’ve added a select which will set the first variable to a number. Clicking the button will then apply focus according to the selection made. You could have a thousand fields and no extra code would be required (except adding numbers to the select control, as used in this example).

<!doctype html>
<html><head>
  <base href="/">
  <meta charset="UTF-8">
  <title>Untitled Document</title>
  <script src="dmxAppConnect/dmxAppConnect.js"></script>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <script src="dmxAppConnect/dmxBootstrap4Navigation/dmxBootstrap4Navigation.js" defer=""></script>
  </head>
  <body is="dmx-app" id="test">
    <dmx-value id="var1" dmx-bind:value="2"></dmx-value>
    <dmx-value id="var2" dmx-bind:value="&quot;myform.input&quot; + var1.value + &quot;.focus()&quot;"></dmx-value>
    <main>
      <div class="container">
        <div class="row">
          <div class="col">
            <div class="container">
              <form id="myform">
                <div class="row">
                  <div class="col-12 col-md-8 col-lg-7 col-xl-5 text-left">
                    <div class="row">
                      <div class="col">
                        <h4>Dynamic, Dynamic Event</h4>
                        <p class="text-h3">Event to run onclick is stored in a variable, which in turn is dependent on another variable.<br></p>
                      </div>
                    </div>
                    <div class="row">
                      <div class="mt-4 col-3">
                        <select id="select1" class="form-control" dmx-on:updated="var1.setValue(value)">
                          <option value="1">1</option>
                          <option value="2">2</option>
                          <option value="3">3</option>
                        </select>
                      </div>
                    </div>
                    <div class="row">
                      <div class="col mt-4">
                        <input type="text" id="input1" name="input1" class="form-control" placeholder="field 1">
                      </div>
                    </div>
                    <div class="row">
                      <div class="col mt-4">
                        <input type="text" id="input2" name="input2" class="form-control" placeholder="field 2">
                      </div>
                    </div>
                    <div class="row mt-4">
                      <div class="col">
                        <input type="text" id="input3" name="input3" class="form-control mb-4" placeholder="field 3">
                        <button class="btn btn-danger" dmx-on:click="var2.value">select field</button>
                        <p>var1: <b>{{var1.value}}</b></p>
                        <p>var2: <b>{{var2.value}}</b></p>
                      </div>
                    </div>
                  </div>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </main>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body></html>
3 Likes
8

Whoa this is really cool, I did not know you could set the value of a variable to a function, then set the action of a button or any event simply state the variable, which calls the function…

Thanks so much for teaching me this, super useful!!

9

I’m glad this was useful. There is a lot more to Wappler than meets the eye. I certainly have a long way to go before understanding its potential.

1 Like
10

Yes, I suppose there are all sorts of things like this that work because it is all built on Javascript…