Closed KhalilJouaneh closed 1 month ago
Hey, it actually allows alphanumeric on mobile. Just check the docs:
// Virtual keyboard appearance on mobile
// Default: 'numeric'
inputMode?: 'numeric' | 'text' | 'decimal' | 'tel' | 'search' | 'email' | 'url'
I can set inputMode to text but when I try typing a letter on desktop nothing happens
I can set inputMode to text but when I try typing a letter on desktop nothing happens
same issue
I can set inputMode to text but when I try typing a letter on desktop nothing happens
For the time being, I am using this workaround.
inputMode="text"
onChange={onChange}
onPaste={(e) => {
e.preventDefault();
if (onChange === undefined) return;
const value = e.clipboardData.getData('text').trim();
onChange(value);
}}
onKeyUp={(e) => {
e.preventDefault();
if (onChange === undefined) return;
const key = e.key;
if (key === EventKey.Backspace) {
onChange(value.slice(0, -1));
return;
}
const isLetterOrNumber = /^[a-zA-Z0-9]$/.test(key);
if (!isLetterOrNumber) return;
onChange(value + key.toLocaleUpperCase());
}}
I'm sorry about this issue @markcnunes @KhalilJouaneh @schwjustin @dannyDNS @OliverGeorge8
The docs never mentioned the input uses a regex pattern
by default, which is a predefined string you can import from the library as well (REGEXP_ONLY_DIGITS
)
The library is shipped with those helpers so that you can allow any predefined regexp, or even enter your own pattern
prop.
export const REGEXP_ONLY_DIGITS = '^\\d+$'
export const REGEXP_ONLY_CHARS = '^[a-zA-Z]+$'
export const REGEXP_ONLY_DIGITS_AND_CHARS = '^[a-zA-Z0-9]+$'
Use <InputOTP pattern="...">
to achieve any pattern you want.
I'm now planning to add this information to the docs in 1.2.5
, too.
With the current implementation, on moible it doesn't allow you to enter alphanumeric codes and only opens the number keyboard.
Request: create a prop that allows you to input alphanumeric entries on mobile.