Use proper HTML5 field type for email field on mobile templates

  • 3 April 2012
  • 3 replies
  • 2 views

This would make mobile devices show a keyboard optimized for entering email addresses (like making “@” more prominent). It would also (I hope) stop Mobile Safari from capitalizing the first character.


3 replies

Hey there, thanks for the nudge Helder! We do want to implement quite a few improvements to accomodate a better mobile experience on the templates, this would definitely be one improvement. The auto-correct and auto-capiltaize are actually just separate attributes on the input element:

autocorrect="off"
autocapitalize=“off”

If you’re able to write a bit of javascript, you should be able to set these attributes on the input fields after the page loads and have it take effect. Changing an element’s “type” with javascript is a bit harder.

Better mobile templates is on our radar for some time this year (we’re mostly focused on building multi-user and agency features at the moment), but we’ll update this thread when any progress has been made.

Cheers,
Carter

Hi, Carter.  Can you give us a concrete example of this?

Thanks!

Nevermind:

Add this to scripts:

emailElement = document.getElementById('email');

 emailElement.setAttribute('type', 'email');

 emailElement.setAttribute('autocorrect', 'false');

 emailElement.setAttribute('autocapitalize', 'false');

This messed up the css since it was keying of the _ type=‘text’  _
Also had to add this.  
You can use the inspector in chrome or safari to get your actual id:

<br />#lp-pom-form-18 .lp-pom-form-field input {&nbsp; &nbsp; border-style: none;<br />}<br /> 

NOTE: YOUR ID WILL BE DIFFERENT!

Thanks,
Josh

Reply