A popular tweet of mine that’s been doing rounds again (thanks to an RT by Stefan, whom you should definitely follow) is this little tip:
💡 This works wonderfully well with HTML by the way, as you can have a single input[type="email"] take multiple entries.https://t.co/Gm94MdQRo3
— Bramus! (@bramus) December 4, 2020
By setting the multiple attribute on an input[type="email"] you can have it accept multiple entries. Each entry is separated by a comma and is validated individually.
Here’s a little demo video of how that works:
💁♂️ For a slight moment there you can see that bramus@bram is considered valid. As per RFC 822 the user@hostname format — used mainly in local networks — indeed is allowed.
~
However, it was pointed out to me that on iOS this isn’t usable by default:
Ironically, iOS(iPhone) keyboard dosnt show comma for this İnput field. Cant even try it
— Errorist (@orhnarkn) December 4, 2020
On iOS, the “email keyboard” looks like this, with no comma to be found (not even when switching to numbers/symbols):
To work around this limitation you can manually override the input to use the regular keyboard by setting the inputmode attribute to text.
That way we still have the built-in browser validation rules (triggered by [type="email"]) and a means to type in a comma (triggered by [inputmode="text"]). Double win!
💁♂️ Sidenote: With this inputmode attribute you can create better number inputs.
~
Combining what we know, here’s a full demo for you to play with:
See the Pen
Accepting multiple e-mail addresses in one input by Bramus (@bramus)
on CodePen.
~
Thank me with a coffee.
I don\'t do this for profit but a small one-time donation would surely put a smile on my face. Thanks!
To stay in the loop you can follow @bramus or follow @bramusblog on Twitter.