Pulling the number keyboard in iOS' Safari while disabling client side input validation

Safari on iOS allows you to pull a specific keyboard for an input field. For example if I have a field expecting numeric input, we’ll make sure that our input has the attribute of “number” rather than the usual “text” as such:

<input type="number"/>

This will save users a few clicks; however Safari forces input validation on the client-side when you do that. Meaning if you wanted a numeric keyboard by default while allowing other characters, you input will fail.


Not only is it highlighted in red, this.value also returns null as opposed to what is clearly in the field, rendering it unusable.

When the field is set to “-10”

Screen Shot 2013-11-20 at 10.14.10 AM

When the field is set to “+10”

Screen Shot 2013-11-20 at 10.14.03 AM

One would think that explicitly defining a pattern to check for would let Safari know that we are interested in trumping its input validation but such is not the case. As a result, the following does not help our cause:

<input type="number" pattern="(-+){0,1}[0-9]{1,}">

So here’s a completely hackish way to get the keyboard you want with no input validation:

<input type="number" pattern="(-+){0,1}[0-9]{1,}" onFocus="that=this; setTimeout(function(){ that.setAttribute('type','text'); },10);" onBlur="that=this; setTimeout(function(){ that.setAttribute('type','number'); },10);"/>;

That’s right, after iOS pulled the right keyboard, we change the field type to “text”. Note that the client will still display some red around the field as it will perform the validation but at least this.value will return what’s in the friggin’ field.

Note 1: the setTimeout is necessary, if we perform the change immediately onFocus, safari pulls the text keyboard.

Note 2: the that=this indirection is necessary to save a reference of the object to the context of setTimeout.

A website to make the meal math easier on the parents


List of current features:

  1. It uses the USDA National Nutrient Database as the basis for all the foods you can search (your tax dollars at work).
  2. You can add your own recipes, ingredients whatever else is not in the base database. We find that we add all the foods we use even if it’s just bread because a bread with a label is always more accurate than the generic/average bread as defined in the USDA database. It’s also nice for adding your family specials once and for all and never have to do the math again.
  3. What you add is not shared amongst users and it only visible to you.
  4. It tries to learn which foods come back to help pick them later on.
  5. It remembers which amounts you last used
  6. Calculates insulin dose on the fly
  7. Very simple & streamlined navigation for the least work for the parents

This is still very much a work in progress but has made our meals a lot more agreeable already.