Controlling Keyboard Display in Mobile Browsers / HTML5 Input Type

[Alan Dobkin]

I would like to streamline data entry on mobile browsers such as Safari on iPhone/iPad. In order to do this, the input type attribute must be specified in the HTML. For example, to specify a numeric keyboard, any of these options would work:

<input type="number" />
<input type="text" pattern="[0-9]*" />
<input type="text" pattern="\d*" />

Other options include displaying a telephone keypad, specific data entry keys for e-mail or URL fields, etc. More details are at the bottom of this page:

https://developer.apple.com/library/safari/codinghowtos/Mobile/UserExperience/

Full details are in the HTML5 documentation:

http://www.w3.org/TR/html5/forms.html#the-input-element

What can be done to make this work with Xataface? I've considered customizing templates, using fields.ini definitions like widget:atts, or adding some code in the delegate class, but I can't find any option that will allow the input type to be changed from the default of text.

Thanks,
Alan

[Alan Dobkin]

I started digging into this project a bit further. It looks like the best solution is to create a basic new module, which registers a new element type in HTML_QuickForm. I am working on that now....

[Alan Dobkin]

I went through the process of creating a new module. That worked out nicely and was much easier to do than I thought, due to Steve's excellent docs!

Afterward, I experimented a bit more and discovered that I don't actually need the module at all. Instead, the following directives in fields.ini accomplish the same thing:

; display a numeric keypad

widget:atts:type = number

; restrict numeric keypad to only digits

widget:atts:pattern = '\d*'

; display a telephone dialer keypad

widget:atts:type = tel

This blog post provides good examples of how these keypads (and other input type elements) look on both iOS and Android devices:

http://blog.teamtreehouse.com/using-html5-input-types-to-enhance-the-mobile-browsing-experience

The date and time options are a bit more difficult to implement, since there are already custom widgets for these elements defined in QuickForm and Xataface. I am experimenting with some changes to those as well now so they appear properly in both a desktop and mobile browser.

Alan