Choose color scheme

About the Author

506 Posts By ben

  • 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.

    IMG_0798

    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.

  • 3 years

    Is how long it took before he discovered the arcade is actually more than a piece of furniture. He is still figuring out the controls as he is used to the iPad where there is little to no indirection between the controls and the output.

    IMG_1137

  • A great day

    having great fun with a great friend.

     IMG_1214

    It was hard not to fall asleep on a day like this

    IMG_1208

    The cool thing about hunting is that failure still means you got some awesome hiking done.

  • Safe sex, beaconning through the night

    Hard to see but 2 condom vending machines are blinking away their presence on the side of a wall in the middle of the night.

    [flv:http://ben.akrin.com/wp-content/uploads/2013/10/IMG_0503.MOV.flv 640 426]

  • Welcome to France!!!

    A massive 4-sided display of nothing but cheese. This is how it’s done.

  • Wooden bridge to more wood part 2

    This Subaru has hauled anything from motorcycles, compost & chicken coops; it’s only suiting to give it another job.

     This 90° turn was a huge bitch.

    Almost there.

    I’m not sure what I’ll do for boards yet, probably more hemlock cuts. I can’t wait to have it ready to use!

  • Wooden bridge to more wood part 1

    A stream prevents us from taking the motorized wheelbarrow to 90% of the land where good fire wood is. It’s a herculean task to carry it all back across the stream and I’m no Hercules. My landlord tells me that hemlocks take water pretty well and we just dropped 2 huge ones for a clearing. It’s time to make a bridge.

    Using a come-along inch by inch; thankfully it was hauled by a car for half of the trip

    Getting ready to cross the stream

    The tipping point

    We’ll want a vertical component on that sucker

    Hurray! One more to go…