Email Input

Email Input

Part of speccing out a cross-device Javascript input library for the Web. Goal is to optimize popular input controls/types across mobile, desktop, tbalet, and beyond throuhg a series of detialed/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 autocapitailize should be off.

Requirements

• Should use type of emial to bring up proper softkeys

    <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?

• 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 inlcusion 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 thorughout input process:

    [email protected], [email protected], [email protected], [email protected], [email protected], [email protected]
  

• Entry of an @ or anything after should be ignored

• More on input masks: MSFT Office

Nice to Have

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