Change to tel type

This commit is contained in:
2025-03-09 18:03:25 +01:00
parent 3c16148bb7
commit a2fe2780cf
2 changed files with 36 additions and 35 deletions

View File

@@ -13,6 +13,6 @@
<div> <div>
<h2>{text}</h2> <h2>{text}</h2>
<Input placeholder={"1"} type="tel" bind:value /> <Input placeholder={"1"} bind:value required />
<Button onclick={() => action(value)}>Submit</Button> <Button onclick={() => action(value)}>Submit</Button>
</div> </div>

View File

@@ -1,42 +1,43 @@
<script lang="ts"> <script lang="ts">
import type { HTMLInputAttributes } from "svelte/elements"; import type { HTMLInputAttributes } from "svelte/elements";
import type { InputEvents } from "./index.js"; import type { InputEvents } from "./index.js";
import { cn } from "$lib/utils.js"; import { cn } from "$lib/utils.js";
type $$Props = HTMLInputAttributes; type $$Props = HTMLInputAttributes;
type $$Events = InputEvents; type $$Events = InputEvents;
let className: $$Props["class"] = undefined; let className: $$Props["class"] = undefined;
export let value: $$Props["value"] = undefined; export let value: $$Props["value"] = undefined;
export { className as class }; export { className as class };
// Workaround for https://github.com/sveltejs/svelte/issues/9305 // Workaround for https://github.com/sveltejs/svelte/issues/9305
// Fixed in Svelte 5, but not backported to 4.x. // Fixed in Svelte 5, but not backported to 4.x.
export let readonly: $$Props["readonly"] = undefined; export let readonly: $$Props["readonly"] = undefined;
</script> </script>
<input <input
class={cn( class={cn(
"border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 w-full rounded-md border px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50", "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
className className,
)} )}
bind:value bind:value
{readonly} {readonly}
on:blur type="tel"
on:change on:blur
on:click on:change
on:focus on:click
on:focusin on:focus
on:focusout on:focusin
on:keydown on:focusout
on:keypress on:keydown
on:keyup on:keypress
on:mouseover on:keyup
on:mouseenter on:mouseover
on:mouseleave on:mouseenter
on:mousemove on:mouseleave
on:paste on:mousemove
on:input on:paste
on:wheel|passive on:input
{...$$restProps} on:wheel|passive
{...$$restProps}
/> />