Show HN: I'm open sourcing Creditly.js, an intuitive credit card form
wangjohn.github.io
wangjohn.github.io
Overall, it's a nice concept. I wish checkout forms were more intuitive.
Can't type in a card number either, although the "Fork me on GitHub" banner is there just fine.
Please just let keys through normally, rely on inputmode="numeric" and possibly also pattern="\d+" to enforce numbers only, and at most only use manual key event processing as a fallback.
I am going to it satire. Anyhow, because then we would have birthday, zip code, telephone and custom ID number all wanted to be implemented. But it would be nice if there is an API in jQuery or in HTML that allows developer to specify the format of the input...
We have birthday in the form of date (<input type="date">) and telephone (<input type="tel">). For US zip codes and custom-ids you could use type="range" or type="number".
I'm still amazed at how sites that can't handle spaces or dashes in the card number or want it formatted in 4 different text boxes. The actual card number worked very well on your form.
:focus::-webkit-input-placeholder { color: #eee;}
the form resembles a credit card.
My opinion is, stick with:
<input type="text">