diff --git a/app/javascript/controllers/iban_input_controller.ts b/app/javascript/controllers/iban_input_controller.ts new file mode 100644 index 000000000..d06e83031 --- /dev/null +++ b/app/javascript/controllers/iban_input_controller.ts @@ -0,0 +1,13 @@ +import { ApplicationController } from './application_controller'; + +export class IBANInputController extends ApplicationController { + connect() { + this.on('input', (event) => { + const target = event.target as HTMLInputElement; + target.value = target.value + .replace(/[^\dA-Z]/g, '') + .replace(/(.{4})/g, '$1 ') + .trim(); + }); + } +} diff --git a/app/javascript/controllers/index.ts b/app/javascript/controllers/index.ts index 66669144e..acc2411e0 100644 --- a/app/javascript/controllers/index.ts +++ b/app/javascript/controllers/index.ts @@ -13,6 +13,7 @@ import { TurboEventController } from './turbo_event_controller'; import { TurboInputController } from './turbo_input_controller'; import { TurboPollController } from './turbo_poll_controller'; import { TypeDeChampEditorController } from './type_de_champ_editor_controller'; +import { IBANInputController } from './iban_input_controller'; const Stimulus = Application.start(); Stimulus.register('autofocus', AutofocusController); @@ -28,3 +29,4 @@ Stimulus.register('turbo-event', TurboEventController); Stimulus.register('turbo-input', TurboInputController); Stimulus.register('turbo-poll', TurboPollController); Stimulus.register('type-de-champ-editor', TypeDeChampEditorController); +Stimulus.register('iban-input', IBANInputController); diff --git a/app/views/shared/dossiers/editable_champs/_iban.html.haml b/app/views/shared/dossiers/editable_champs/_iban.html.haml index 04bf7d9f6..82be3a55e 100644 --- a/app/views/shared/dossiers/editable_champs/_iban.html.haml +++ b/app/views/shared/dossiers/editable_champs/_iban.html.haml @@ -2,4 +2,5 @@ id: champ.input_id, placeholder: "27 caractères au format FR7630006000011234567890189", required: champ.mandatory?, - aria: { describedby: champ.describedby_id } + aria: { describedby: champ.describedby_id }, + data: { controller: 'iban-input'}