Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.

like image 980
marissajmc Avatar asked Nov 22 '11 05:11

marissajmc


People also ask

How do I get the number only keyboard on my iPhone?

If a keyboard isn't already visible, tap the Show Keyboard button , then tap the Formula Keyboard button to begin editing a formula. To quickly enter a number or symbol on an iPad, drag down on a key and then lift your finger, or switch to the numeric keyboard on iPhone.

What keys lets you type numbers using the numeric keypad?

To use the numeric keypad to enter numbers, press Num Lock. Most keyboards have a light that indicates whether Num Lock is on or off.

How do I only show the numeric keypad on my Android?

The keyboard actually has a full number pad layout too; unlike some keyboards, it's available in any app. To get the number pad, and tap the special character key in the lower left corner of the keyboard.


3 Answers

Styling the field to contain symbols

When it comes to including the symbols within this number field, you can use some walkaround like that:

HTML:

<span id="number-container">     <input type="number" name="number" id="number-field" value="500" />     <span id="number-container-symbol">$</span> </span> 

CSS:

#number-container {     position: relative; } #number-container-symbol {     left: 5pt;     position: absolute;     top: 0px; } #number-field {     background-color: transparent;     padding-left: 10pt; } 

Treat it as a proof of concept. See this jsfiddle for a live example. It looks like that in Chrome:

enter image description here

Defining smaller granularity

Based on the documentation on number input (Editor's Draft), to define granularity you need to add step="<some-floating-point-number>" attribute to the <input> tag:

<input type="number" name="number" value="500.01" step="0.01" /> 

and it will work in many modern browsers. See this jsfiddle for tests.

Conclusion

You should be able to style it to contain symbols you need. There is also a feature that, according to documentation, enables support for floating-point numbers.

Alternative solution - empty field in front of something else

You can also trick someone into believing he is seeing content of the input field, but show him something else behind the field (this is some extension of my original solution). Then if someone taps the field, you can propagate proper value etc., then go back to the previous state on blur. See this code (live example on jsfiddle - blue color means you are looking at something that is not within the field):

// store original value from INPUT tag in jQuery's .data() var input_field = jQuery('#number-field'); var display_span = jQuery('#number-container-value'); var base_val = parseFloat(input_field.val()); input_field.data('storedVal', base_val); input_field.val(''); display_span.html(base_val);  // react to field gaining and losing focus jQuery('#number-field').on('focus', function(event){     var el = jQuery(this);     var display = jQuery('#number-container-value');     if (typeof el.data('storedVal') != 'undefined'){         el.val(el.data('storedVal'));     };     display.html(''); }).on('blur', function(event){     var el = jQuery(this);     var display = jQuery('#number-container-value');     var new_val = parseFloat(el.val());     el.data('storedVal', new_val);     display.html(new_val);     el.val(''); }); 

(the full code with styling is on the mentioned jsfiddle). The code needs shortening & cleaning up, but it is a proof of concept. Try it and share your findings, please.

like image 109
Tadeck Avatar answered Sep 21 '22 10:09

Tadeck


Why not put the $ outside the input field (as a label). Or the percent sign to the right of the input field? Seems like that'd solve your issue and you'd be able to use input type="number" and it'd just work.

like image 21
Dad Avatar answered Sep 18 '22 10:09

Dad


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/

like image 21
Ahmed Nuaman Avatar answered Sep 17 '22 10:09

Ahmed Nuaman