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);