Skip to content

Commit

Permalink
feat: add paste support (#9)
Browse files Browse the repository at this point in the history
Closes #8
  • Loading branch information
hex authored Jul 27, 2022
1 parent f003e29 commit c700ffc
Show file tree
Hide file tree
Showing 4 changed files with 58 additions and 6 deletions.
7 changes: 6 additions & 1 deletion src/Pincode.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -141,6 +141,11 @@
code = input.split("");
}
function handlePaste(e) {
e.preventDefault();
code = e.clipboardData.getData("text").split("");
}
$: _type.set(type);
$: _selectTextOnFocus.set(selectTextOnFocus);
$: value = code.join("");
Expand All @@ -157,7 +162,7 @@
}
</script>

<div data-pincode bind:this="{ref}" {...$$restProps} on:input="{handleInput}">
<div data-pincode bind:this="{ref}" {...$$restProps} on:input="{handleInput}" on:paste="{handlePaste}">
<slot />
</div>

Expand Down
25 changes: 23 additions & 2 deletions src/PincodeInput.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,16 @@
const unsubscribeSelectTextOnFocus = ctx._selectTextOnFocus.subscribe((_selectTextOnFocus) => {
selectTextOnFocus = _selectTextOnFocus;
});
const KEYBOARD = {
CONTROL: "Control",
COMMAND: "Meta",
V: "v",
TAB: "Tab",
BACKSPACE: "Backspace",
};
let unsubscribe = undefined;
let modifierKeyDown = false;
onMount(() => {
ctx.add(id, value);
Expand Down Expand Up @@ -50,12 +58,20 @@
on:blur
on:keydown
on:keydown="{(e) => {
if (e.key === 'Backspace') {
if (e.key === KEYBOARD.BACKSPACE) {
e.preventDefault();
return ctx.clear(id);
}

if (e.key !== 'Tab') {
if (e.key == KEYBOARD.CONTROL || e.key == KEYBOARD.COMMAND) {
modifierKeyDown = true;
}

if (e.key == KEYBOARD.V && modifierKeyDown) {
return;
}

if (e.key !== KEYBOARD.TAB) {
e.preventDefault();

if (type === 'numeric' && /^[0-9]$/.test(e.key)) {
Expand All @@ -67,6 +83,11 @@
}
}
}}"
on:keyup="{(e) => {
if (e.key == KEYBOARD.CONTROL || e.key == KEYBOARD.COMMAND) {
modifierKeyDown = false;
}
}}"
/>

<style>
Expand Down
7 changes: 6 additions & 1 deletion src/unstyled/Pincode.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -141,6 +141,11 @@
code = input.split("");
}
function handlePaste(e) {
e.preventDefault();
code = e.clipboardData.getData("text").split("");
}
$: _type.set(type);
$: _selectTextOnFocus.set(selectTextOnFocus);
$: value = code.join("");
Expand All @@ -157,6 +162,6 @@
}
</script>

<div data-pincode bind:this="{ref}" {...$$restProps} on:input="{handleInput}">
<div data-pincode bind:this="{ref}" {...$$restProps} on:input="{handleInput}" on:paste="{handlePaste}">
<slot />
</div>
25 changes: 23 additions & 2 deletions src/unstyled/PincodeInput.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,16 @@
const unsubscribeSelectTextOnFocus = ctx._selectTextOnFocus.subscribe((_selectTextOnFocus) => {
selectTextOnFocus = _selectTextOnFocus;
});
const KEYBOARD = {
CONTROL: "Control",
COMMAND: "Meta",
V: "v",
TAB: "Tab",
BACKSPACE: "Backspace",
};
let unsubscribe = undefined;
let modifierKeyDown = false;
onMount(() => {
ctx.add(id, value);
Expand Down Expand Up @@ -50,12 +58,20 @@
on:blur
on:keydown
on:keydown="{(e) => {
if (e.key === 'Backspace') {
if (e.key === KEYBOARD.BACKSPACE) {
e.preventDefault();
return ctx.clear(id);
}

if (e.key !== 'Tab') {
if (e.key == KEYBOARD.CONTROL || e.key == KEYBOARD.COMMAND) {
modifierKeyDown = true;
}

if (e.key == KEYBOARD.V && modifierKeyDown) {
return;
}

if (e.key !== KEYBOARD.TAB) {
e.preventDefault();

if (type === 'numeric' && /^[0-9]$/.test(e.key)) {
Expand All @@ -67,4 +83,9 @@
}
}
}}"
on:keyup="{(e) => {
if (e.key == KEYBOARD.CONTROL || e.key == KEYBOARD.COMMAND) {
modifierKeyDown = false;
}
}}"
/>

0 comments on commit c700ffc

Please sign in to comment.