search

eduardoborges / use-mask-input

✏️ A react Hook for build elegant input masks. Compatible with React Hook Form
https://npmjs.com/package/use-mask-input
332 stars 19 forks source link

url mask placeholder option #93

Open monecchi opened 2 months ago

monecchi commented 2 months ago

How do I change the placeholder for the url mask?

I'm using Next.js 14 with along 'react-hook-form'

The following does not seem to work:

{...registerWithMask('website', 'url', { 'placeholder': 'https://' })}

I want to change the placeholder for the url mask placeholder from http:// to https...

I've gave the code a look here, and it seems to be set to https by default, but my placeholder is http as also the input masked value: http://mywebsite.com

eduardoborges commented 2 months ago

hey @monecchi how u doing?

well, the url alias treat http and https so you cant set an placehold who trait the mask contract.

in this case its better use an custom mask.

i belive the follow mask will work:

"https:/\/(a|9|.|/|?|=){1,}"

monecchi commented 2 months ago

@eduardoborges Thanks! I'll give it a try!

eduardoborges commented 3 weeks ago

Hey @monecchi, results? haha

monecchi commented 3 weeks ago

@eduardoborges Thanks for following up. It worked somehow… Although the regex did the trick, the masked result is only readable (visible) after submitting the form, it has a sort of “glitch” and it does not allow typing the (.) dot also. I’ll keep an eye on that in order to see if I’m applying it the right way.