<Input Type="Number"/> Is Not Showing a Number Keypad on iOS

input type=number/ is not showing a number keypad on iOS

You need to specify the pattern:

<input type="number" pattern="\d*"/>

As a number can be negative or with floating point, so the - and . and , should be available in the keyboard, unless you specify a digits only pattern.

input type number not working on ipad

I know this is an old question, but I happened to have the same problem, and I noticed that the what worked for me in the end hasn't been provided as an answer, so I'll add the answer for the next guy.

<input type="number" min="0" inputmode="numeric" pattern="[0-9]*" title="Non-negative integral number">

This site explains the reasoning behind the solution in case you are interested.

The gist of it is that pattern="[0-9]*" is what triggers iOS to display a numeric keypad, while min and numeric are there to make sure that other OSes and browsers still work well with type="number".

Edit: iOS 12.2 for the iPad no longer supports the pattern="[0-9]*" fix - perhaps use type=tel instead.

How to make html input type numeric NOT appear as type password on apple device

Since you already have type="text" you can try some other venues, since the browser should not show it as a password. You can try 2 other methods,

1. -webkit-text-security: none;
2. input-security: none;

The first is only supported by browsers that support the webkit keyword, and the second option is still a draft and not really supported by any browsers yet. So it might be a good idea to test this in different browsers caniuse says that -webkit-text-security is not supported by firefox for example.

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

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

inputType={number}, Number dial pad not showing in ios but visible in android - React js

I resolved the issue.
Done some silly mistake of not noticing the {...inputProps} it contains all the remaining props for input.

In my TextInput component simply added the methods : pattern and inputMode

var { pattern, inputMode } = this.props

 <Form.Control isInvalid={!!error} className={warning ? "border border-warning " : undefined}
              disabled={disabled}
              type={inputType}
              placeholder={placeholder}
              value={value}
              pattern={pattern} // add this
              inputMode={inputMode} // add this
              defaultValue={defaultInput}
              maxLength={maxLength}
              onChange={(e) => onChange(e.target.value)}
              onKeyPress={(e) => this.onKeyUp(e)}
              {...inputProps}
            />     

Then in my other files simply used these props like this :

<TextInput
   ..other props
   pattern={"[0-9]*"}
   inputMode={"numeric"}
   onChange={(text) =>
            changeValue(formData.mobileNum.propName, text)
   }
/>

pattern={"[0-9]*"} and inputMode={"numeric"} will force this ios devices to use number dialpad. Although pattern prop alone is enough inputMode is just a fallback if pattern doesn't work.

Note -> This will not affect the android behaviour with number keypad.

Alternative :

Instead of changing contents in the Main component we can utilise {...inputProps}

<TextInput
   ...other props
   inputProps={{ pattern: "[0-9]*", inputMode: "numeric" }} //add this
   onChange={(text) =>
            changeValue(formData.mobileNum.propName, text)
   }
/>

---

Related Topics