Email Input

This is a part of a multi-device JavaScript input library for the Web. The goal is to optimize popular input controls/types across mobile, desktop, tablet, and beyond through a series of detailed/designed input controls.

Email is a common input with strict formatting rules. In cases where a specific domain are required, an input mask can help maintain valid entries. As email addresses are not prose, autocorrect and autocapitalize should be disabled.

Requirements

• Should use type of email to bring up proper soft keys

    <input type="email">
  

• Must be a valid email format (reg-ex can be validated through JS or HTML5 pattern)

• Proper pattern for email is:

    1*( atext / "." ) "@" ldh-str 1*( "." ldh-str )
  

• If browser does not understand type="email" it will default to "text". Need a JS validation fallback in this case?

• Proper sizing of control for touch-based devices

• Top-align label for cross-device layout

• Should include autocorrect="off" autocapitalize="off" to avoid mobile OS caps & automatic corrections (don't need spelling corrections on an email address after all)

    autocorrect="off" autocapitalize="off"
  

• Optional inclusion of multiple & autofocus

    multiple = "multiple" or ""
    autofocus = "autofocus" or "" 
  

• Optional inclusion of an input mask when a specific domain is required (i.e. email has to end in "@me.com")

• Input mask should be ghosted, then stay visible throughout input process:

    @me.com, [email protected], [email protected], [email protected], [email protected], [email protected]
  

• Entry of an @ or anything after should be ignored

• Should use placeholder attribute by default that can be changed. May need JS support for fallback where placeholder is not supported.

    placeholder="[email protected]"
  

• More on input masks: MSFT Office

Nice to Have

• Optional ability to set valid format to only a few domains (probably not needed)