Wedge

Public area => The Pub => Off-topic => Topic started by: godboko71 on April 27th, 2012, 05:53 AM

Title: Different Keys (touch screen keyboards) for different form elements?
Post by: godboko71 on April 27th, 2012, 05:53 AM

So I was given an iPad 2 a couple of months ago and I noticed some websites forms where smart, if it was email the @, -, and _ where on the main keyboard instead of having to goto the numbers or special characters parts of the keyboard.

I was wondering is there a standard all smart devices use for that feature or is it something that can only be targeted to Apples Safari Browser?

Title: Re: Different Keys (touch screen keyboards) for different form elements?
Post by: live627 on April 27th, 2012, 08:11 AM

HTML5 feature. It's the email input type.

Desktop browsers use it to help with form validation. Not sure what Android does.

Title: Re: Different Keys (touch screen keyboards) for different form elements?
Post by: Nao on April 27th, 2012, 08:32 AM

Yup. And Wedge supports most html5 custom input types. :)

Title: Re: Different Keys (touch screen keyboards) for different form elements?
Post by: godboko71 on April 30th, 2012, 05:39 AM

Thanks live Will look into it. Awesome Nao

Title: Re: Different Keys (touch screen keyboards) for different form elements?
Post by: Arantor on April 30th, 2012, 02:33 PM

To explain, you can use <input type="email"> instead of <input type="text">, and non-compliant browsers will just render a standard textbox but ones that are compliant and where it makes sense will do something different; Mobile Safari at least will give you the email-centric keyboard.

There are other advantages for this, too, e.g. type="number" where you can set optional min and max and step for the number, e.g. you can set min=2, max=10 and step=2 and compliant browsers will only allow you to submit the form if the number in the box is between 2 and 10 in steps of 2, e.g. 2, 4, 6, 8, 10. (Non-compliant ones only treat it as a regular textbox but it's a nice way of doing things, but it does use browser UI rather than any custom UI, so you might want to use your own UI if you custom-validate other elements and display warnings client-side before sending the form off)

Title: Re: Different Keys (touch screen keyboards) for different form elements?
Post by: Nao on May 1st, 2012, 06:16 PM

IIRC some browsers give you custom CSS to be able to restyle these warnings.

Title: Re: Different Keys (touch screen keyboards) for different form elements?
Post by: Arantor on May 1st, 2012, 07:58 PM

I never looked to be honest, but it would be neat if they do.

Certainly if they don't now, they will going forward and hopefully in a cross-browser fashion.

Title: Re: Different Keys (touch screen keyboards) for different form elements?
Post by: Nao on May 1st, 2012, 10:04 PM

I'm positive that webkit does it at least.