iOS5 show numeric keypad by default without using

Question

With the release of iOS5, Apple has added their own validation to input type="number" form fields. This is causing some issues; see this question below which sums it up:

Input type='number' new validation removes leading zeros and formats number in Safari for iPhone iOS5 and latest Safari for Mac

Although input type="tel" works to bring up a numeric keypad on the iphone, it's the telephone keypad which has no decimal points.

Is there a way to set the numeric keypad as default using html/js? This not an iphone app. At minimum I need numbers and a decimal point in the keypad.

Update

Number input fields in Safari 5.1/iOS 5 only accept digits and decimal points. The default value for one of my inputs is $500,000. This is resulting in Safari showing a blank input field because $ , % are invalid characters.

Furthermore, when I run my own validation onblur, Safari clears the input field because I'm adding a $ to the value.

Thus Safari 5.1/iOS5's implementation of input type="number" has rendered it unusable.

jsfiddle

Try it here - http://jsfiddle.net/mjcookson/4ePeE/ The default value of $500,000 won't appear in Safari 5.1, but if you remove the $ and , symbols, it will. Frustrating.

Answer 1

There is potentially another way around the issue for the iPhone:

<input id="test" TYPE="text" value="5.50" ontouchstart="this.type='number'" onfocus="this.type='text'" />

This changes the type to number before the input gets focus when touched (so that the numeric keyboard shows) and then changes the type to text so that the correct value can be edited.

Getting it working reliably might be hard though e.g. currently touch input but then slide finger off control leaves it as type=number, and I can't think of a way to detect the Next button on keyboard, amongst other issues.

Answer 2

Your problem would be solved if Safari would support the HTML5 'inputmode' attribute for input elements. Nobody knows if, or when that is going to happen. In the meantime this link provides some interesting reading.

Answer 3

I had a similar problem, and came up with this dead-ugly js solution, forcing the iPad to popup the numeric keypad.

My problem was that safari filter away everything except digits when the form is posted, and I need various extra characters, for example "3/7", or "65$".

var elem = document.getElementById('MathAnswer');
elem.type = 'number';

elem.onfocus = function() {
  setTimeout(function() {
    elem.type = 'text'; 
  }, 1);
};

It simply set the input type back to 'text' after iPad has shown the numeric keypad, and voila, safari no longer removes any non-digits.

Hope it helps someone!

Answer 4

You're stuck between a rock and a hard place. Until there's a place in the HTML spec for type="currency" (and that'll probably never happen cos of the different ways different countries write currency), you're going to have to use some JS magic to get around the problem.

Of course number nor telephone won't be the best idea, however by using a bit of JS cunning I've come up with this solution:

var i   = document.getElementById( 'input' );

i.onblur    = function()
{
    i.type  = 'text';

    i.value = number_format( i.value );
}

i.onfocus   = function()
{
    var v   = Number( i.value.replace( /\D/, '' ) );

    i.type  = 'number';

    i.value = v > 0 ? v : '';
}

Simply I swap the type of the input depending on focus/blur, this means that once the user has left the text field, we can format its ass. When the user returns, we take the value, if there's one that's > 0 and we stick it back in as a number. Here's the working test, I hope it helps: http://jsfiddle.net/ahmednuaman/uzYQA/

Answer 5

The following pops up the numeric keyboard for iPad with iOS5, allows any character to be typed, and allows any value to be set:

<input type="text" pattern="\d*">

However it is ugly, fragile (probably will break in future ...), and doesn't work on iPhone (iPhone shows the numeric keypad that only allows 0 to 9). The solution only seems to work using the pattern \d* or its equivalent [0-9]*.

Maybe better to use type="tel" which seems to act the same.

Answer 6

Working solution: Tested on iPhone 5, Android 2.3, 4

Tadeck's solution (bounty winner) of using a <span> to contain the input field symbols and place a formatted <span> on top of the currency input is essentially what I ended up doing.

My final code is different and shorter however so I'm posting it here. This solution resolves the iOS5 validation issue of $ , % symbols inside input fields and so input type="number" can be used by default.

Symbol field eg. "xx %" "xx years"

<input name="interest-rate" value="6.4" maxlength="4" min="1" max="20" />
<span class="symbol">%</span>

• Simply use a number input field and a span outside the input to display the symbol.

Currency field eg. "$xxx,xxx"

<span id="formatted-currency">$500,000</span>
<input id="currency-field" type="number" name="loan-amount" value="500000" maxlength="8" min="15000" max="10000000" />

• Position the span on top of the currency input and set the input to display:none
• When a user clicks/taps on the span, hide the span and show the input. If you position the span perfectly the transition is seamless.
• The number input type takes care of the validation.
• On blur and submit of the input, set the span html to be the input's value. Format the span. Hide the input and show the span with the formatted value.

$('#formatted-currency').click(function(){
    $(this).hide();
    $('#currency-field').show().focus();
});
$('#currency-field').blur(function(){
    $('#formatted-currency').html(this.value);
    $('#formatted-currency').formatCurrency({
        roundToDecimalPlace : -2
    });
    $(this).hide();
    $('#formatted-currency').show();
});
// on submit
$('#formatted-currency').html($('#currency-field').val());
$('#formatted-currency').formatCurrency({
    roundToDecimalPlace : -2
});
$('#currency-field').hide();
$('#formatted-currency').show();