There are available events emitted by the hosted field instance that you can subscribe to. This can be done on the hostedField instance.
These events include:
| Name | Event Description |
|---|---|
| focus | This event is emitted when a field gains focus |
| blur | This is emitted when a field loses focus |
| validityChange | This is emitted when the validity of a field changes |
| empty | This is emitted when the field becomes empty |
Register the events using the on method on the hostedFieldInstance returned.
See below an example using the focus and blur event:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
function findLabel(field) { return $('.hosted-field--label[for="' + field.container.id + '"]'); } hostedFieldInstance.on('focus', function (event) { var field = event.fields[event.emittedBy]; findLabel(field).addClass('label-float').removeClass('filled'); }); hostedFieldInstance.on('blur', function (event) { var field = event.fields[event.emittedBy]; var label = findLabel(field); if (field.isEmpty) { label.removeClass('label-float'); } else if (field.isValid) { label.addClass('filled'); } else { label.addClass('invalid'); } }); |