diff --git a/angular-code-input/src/lib/code-input.component.html b/angular-code-input/src/lib/code-input.component.html index 5fb36e9..eef958e 100644 --- a/angular-code-input/src/lib/code-input.component.html +++ b/angular-code-input/src/lib/code-input.component.html @@ -2,6 +2,7 @@ [class.empty]="isInputElementEmptyAt(i)" [class.code-hidden]="isCodeHidden"> diff --git a/angular-code-input/src/lib/code-input.component.ts b/angular-code-input/src/lib/code-input.component.ts index d900dc2..de12fe9 100644 --- a/angular-code-input/src/lib/code-input.component.ts +++ b/angular-code-input/src/lib/code-input.component.ts @@ -3,10 +3,12 @@ import { Component, ElementRef, EventEmitter, - Input, OnChanges, + Input, + OnChanges, OnInit, Output, - QueryList, SimpleChanges, + QueryList, + SimpleChanges, ViewChildren } from '@angular/core'; @@ -99,6 +101,43 @@ export class CodeInputComponent implements AfterViewInit, OnInit, OnChanges { this.inputs[next].focus(); } + onPaste(e: ClipboardEvent, i: number): void { + e.preventDefault(); + e.stopPropagation(); + + const data = e.clipboardData?.getData('text'); + + if (this.isEmpty(data)) { + return; + } + + // Convert paste text into iterable + const values = data.split(''); + let index = 0; + + for (const val of values) { + const target = this.inputs[i + index]; + + // Cancel the loop when a value cannot be used + if (!this.canInputValue(val)) { + this.setInputValue(target, null); + this.setStateForInput(target, InputState.reset); + return; + } + + this.setInputValue(target, val.toString()); + + // Emit changes when we have reached the last input or we are at the last cycle of our values array + if (i + index + 1 > this.codeLength - 1 || index >= values.length - 1) { + target.blur(); + this.emitChanges(); + return; + } + + index += 1; + } + } + async onKeydown(e: any, i: number): Promise { const target = e.target; const isTargetEmpty = this.isEmpty(target.value);