Input (BS5) missing onfocusin() and onfocusout() events

1

I cannot found the onfocusin() and onfocusout() events in the Input (BS5) control. In the help page of Input (Bootstrap 5), it show follows.

Standard events are supported. For this control, the onfocusin and onfocusout events will be useful. They are called when the user changes the focus to another field.

Even the sample code have this event.

*Function ipiInput1_onfocusout() *

  •   MsgBox "Value is " & ipiInput1.value *

End Function

When I run the code in browser, nothing happen.

Should I need to use back BS4?

2

It is so funny. I added a BS4 control (input or button or even label) in the form, then the onfocusout() event on Input (BS5) is working. When I deleted the this control, it won’t work again.

3

Not sure what’s going on here. We’ll fix the focus events right away and see if that resolves the issue.

Mixing BS4 and BS5 controls in the same app will definitely cause problems - don’t do that.

4

We’ve got a workaround for now - we’ll build this into AppStudio.

Right now, you probably have a function like this:

Input1.onfocusin = function () {
  console.log("focus in");
};

The problem is that BS5 is not automatically registering this as an event, so you need to add an extra line:

Input1.onfocusin = function () {
  console.log("focus in");
};
Input1.addEventListener("focusout", Input1.onfocusout);
5

Thanks. It work now.

6

Now the latest software update of Input (BS5) have the onfocusout and onfocusin events, but they are not working. When I changed back the control to Input (BS4), it work fine.

7

We’ll give them another test…

8

Give this a try - does this work for you?

JavaScript

Input1.onfocus = function () {
  console.log("onfocus");
};

Input1.onblur = function () {
  console.log("onblur");
};

Input1.onkeydown = function () {
  console.log("onkeydown");
};

BASIC

Function Input1_onfocus()
  console.log("onfocus")
End Function

Function Input1_onblur()
  console.log("onblur")
End Function

Function Input1_onkeydown()
  console.log("onkeydown")
End Function
9

I have a funny findings with onfocus(), onfocusin(), onblur(), onfocusout() events on BS5 input control only, BS4 input control only and a form mixed with BS5 & BS4 input controls.

BS5 input control only: Only onfocus() & onblur() are working
BS4 input control only: Only onfocusin() & onfocusout() are working

A form mixed with both BS5 & BS4 input control
BS5 input control: All 4 events onfocus(), onfocusin(), onblur() & onfocusout() are working
BS4 input control: Only onfocusin() & onfocusout() are working

Should I use onfocus() & onblur() for BS5 conrtol rather than onfocusin() & onfocusout()?

10

First, do not mix BS4 and BS5 in the same project - weird things will happen.

Yes, use the onblur and onfocus instead.