Question

132

iOS5 show numeric keypad by default without using type=number or type=tel

rated 0 times [ 138] [ 6] / answers: 1 / hits: 19309 / 13 Years ago, tue, november 22, 2011, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

tomas

Add To Favorites

Follow

Total Points: 165

Total Questions: 111

Total Answers: 103

Location: Maldives

Member since Tue, Dec 21, 2021

2 Years ago

tomas questions

1 Restore scroll position when navigating with React Router 6

Thu, Jan 27, 22, 00:00, 2 Years ago

1 Chart.js remove gridline

Mon, May 10, 21, 00:00, 3 Years ago

1 Axios Error 401 (Unauthorized) Error when trying to fetch api

Thu, Mar 4, 21, 00:00, 3 Years ago

1 How do I wait for this animation to finish before moving on to the next one?

Mon, Feb 22, 21, 00:00, 3 Years ago

1 How to set html input tag width fit-content in css

Tue, Jan 5, 21, 00:00, 3 Years ago

View All

answered 13 Years ago jananauticat · Accepted Answer

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();