feat: enhance input fields for numeric entry

- Added `inputMode="numeric"` and `pattern="[0-9]*"` attributes to number input fields in WithdrawModalContent, SetModalContent, and ListCreationModalContent components.
- These changes improve user experience by ensuring that numeric keyboards are displayed on mobile devices, facilitating easier input of numerical values.

Signed-off-by: Innei <tukon479@gmail.com>
This commit is contained in:
Innei 2025-01-15 13:24:10 +08:00
parent f17446d027
commit 00a07647f8
No known key found for this signature in database
GPG Key ID: 0F62D33977F021F7
3 changed files with 12 additions and 1 deletions

View File

@ -148,6 +148,8 @@ const WithdrawModalContent = ({ dismiss }: { dismiss: () => void }) => {
<Input
{...field}
type="number"
inputMode="numeric"
pattern="[0-9]*"
onChange={(value) => field.onChange(value.target.valueAsNumber)}
/>
</FormControl>

View File

@ -122,7 +122,14 @@ export function SetModalContent({
<FormControl className="!mt-0">
<div className="flex items-center gap-10">
<div className="space-x-2">
<Input className="w-24" type="number" max={12} {...field} />
<Input
className="w-24"
type="number"
inputMode="numeric"
pattern="[0-9]*"
max={12}
{...field}
/>
<span className="text-sm text-muted-foreground">
{t("rsshub.useModal.month")}
</span>

View File

@ -189,6 +189,8 @@ export const ListCreationModalContent = ({ id }: { id?: string }) => {
<Input
{...field}
type="number"
inputMode="numeric"
pattern="[0-9]*"
min={0}
onChange={(value) => field.onChange(value.target.valueAsNumber)}
/>