39 lines
1.1 KiB
Svelte
39 lines
1.1 KiB
Svelte
|
<script lang="ts">
|
||
|
|
export let id: string;
|
||
|
|
export let value: number;
|
||
|
|
|
||
|
|
export let negative = false;
|
||
|
|
|
||
|
|
function inputInteger(event: Event & {currentTarget: (EventTarget & HTMLInputElement)}) {
|
||
|
|
let newValue = event.currentTarget.value;
|
||
|
|
|
||
|
|
if (newValue.startsWith("0") && newValue.length > 1) {
|
||
|
|
newValue = newValue.slice(1, newValue.length)
|
||
|
|
}
|
||
|
|
|
||
|
|
if (!isNaN(Number(newValue))) {
|
||
|
|
value = Number(newValue);
|
||
|
|
}
|
||
|
|
else if (negative && newValue.startsWith("-")) {
|
||
|
|
if (isNaN(Number(newValue.slice(1, newValue.length)))) {
|
||
|
|
event.currentTarget.value = value.toString();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else if (newValue === "") {
|
||
|
|
event.currentTarget.value = "0";
|
||
|
|
value = 0;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
event.currentTarget.value = value.toString();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<input {id} type="text" class="digitInput" style="--valuelen: {value.toString().length + 3}ch" on:input|preventDefault={inputInteger} {value}>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.digitInput {
|
||
|
|
width: var(--valuelen);
|
||
|
|
padding-left: 1ch;
|
||
|
|
}
|
||
|
|
</style>
|