How would I add an @blur named action to a field snippet?

Support
1

Neil Manchester:
How would I add an @blur named action to a field snippet?

Andrew Dam:
Here’s a jQuery example of attaching a blur event listener to an element:

$("#my-input").blur(function(){
  alert("This input field has lost its focus.");
});

For fields such as inputs, you can add an id key for the selector to find:

{
  "inputType": "text",
  "id": "my-input",
  "label": "My Input",
  "model": "field1",
  "styleClasses": "col-md-3",
  "type": "input"
}

Neil Manchester:
Great. Thanks Andrew

Neil Manchester:
Assuming I need to put the jQuery code in my onFormLoad?

Andrew Dam:
Yep, that’s correct.

Neil Manchester:
Thought so but not getting the alert firing

Andrew Dam:
What type of field are you attempting this on?

Neil Manchester:
"inputType": "tel"

Andrew Dam:
Hm. seems to work for me with an inputType of tel. If you want to share your field I can test the implementation.

Neil Manchester:
Thanks

{
                "fieldClasses": "fieldInput",
                "id": "phone-mobile",
                "inputType": "tel",
                "labelClasses": "fieldLabel",
                "label_calc": "app.activeOrganisation.addressCellSetting",
                "model": "selectedPatient.phoneMobile",
                "styleClasses": "col-span-12 sm:col-span-6 md:col-span-3",
                "type": "input",
                "visible_calc": "!model.isLoading"
}

Andrew Dam:
That also works for me as well. And to confirm, this is your onFormLoad?

$("#phone-mobile").blur(function(){
  alert("This input field has lost its focus.");
});

Neil Manchester:
Got it. I’d put this after my model.isLoading=true so the field hadn’t rendered. Move it to further down my onFormLoad and works. Thanks

Andrew Dam:
Gotcha, great glad it works.