Showing an input that only allows numbers and the decimal point?

Question

Is there any way to define an <input> that shows a keyboard input that only allows numbers and the decimal point (or comma for international users)?

<input type='tel'> shows phone crap I don't need, and no decimal point
<input type='number' pattern='[0-9]*'> shows all numbers, but no decimal point

What can I do to get the input I need?

-1? I misunderstood your question at first I suppose. What I gave is correct HTML5 that causes the proper data validation in fully compliant browsers. The [Apple Developer's Library](https://developer.apple.com/library/safari/#codinghowtos/Mobile/UserExperience/_index.html) listing 15 gives the patterns that will actually cause different iphone keyboards to be displayed. I imagine the list is exhaustive, and good day sir. — chucksmash, Feb 09 '12 at 04:55
@IamChuckB: Wrong answers get downvoted. It isn't personal. Oddly enough, I would have accepted your comment as correct with an upvote! — Stefan Kendall, Feb 10 '12 at 02:59

score 4 · Answer 1 · answered May 28 '12 at 16:46

4

You can try this attribute to your type="number" field:

pattern="\d+(\.\d*)?"

this will allow only digits with/without a decimal point and the floating numbers on the right.

answered May 28 '12 at 16:46

Paris Char

477
4
17

3

NOTE #1: this will still bring the full keyboard but in the number/symbol pane be default. The user can still switch to alphanumeric **BUT upon onblur event, the pattern kicks in and removes any alphanumeric characters (but not numbers).** NOTE #2: It has to be both type="number" and pattern="\d+(\.\d*)?" in order to work!. Plus the browser needs to support html5. This works in normal browsers and Safari in IOS. – Paris Char May 28 '12 at 16:52
1

The latest versions of Chrome seem to error if you combine type="number" with this (and any) pattern. Chrome only reliably applies patterns to input type="text". – egid Dec 27 '13 at 18:18
I tried the above but it does not work, and I find confusing for the user showing the full keyboard when only numbers and a dot are allowed. I ended up using 2 inputs type="number" separated by a static "." – Paranoid Android May 22 '14 at 09:49

Andrej · Answer 2 · 2017-11-25T10:30:28.963

Please see my project of the cross-browser filter of value of the text input element on your web page using JavaScript language: Input Key Filter . You can filter the value as an integer number, a float number, or write a custom filter, such as a phone number filter. See an example of code of input a float number

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Input Key Filter Test</title>
 <meta name="author" content="Andrej Hristoliubov anhr@mail.ru">
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 
 <!-- For compatibility of IE browser with audio element in the beep() function.
 https://www.modern.ie/en-us/performance/how-to-use-x-ua-compatible -->
 <meta http-equiv="X-UA-Compatible" content="IE=9"/>
 
 <link rel="stylesheet" href="https://rawgit.com/anhr/InputKeyFilter/master/InputKeyFilter.css" type="text/css">  
 <script type="text/javascript" src="https://rawgit.com/anhr/InputKeyFilter/master/Common.js"></script>
 <script type="text/javascript" src="https://rawgit.com/anhr/InputKeyFilter/master/InputKeyFilter.js"></script>
 
</head>
<body>
 <h1>Float field</h1>
Float field: 
<input id="Float"
 onchange="javascript: onChangeFloat(this)"
 onblur="inputKeyFilter.isNaN(parseFloat(this.value), this);"
/>
<script>
 CreateFloatFilter("Float");
 
 function onChangeFloat(input){
  inputKeyFilter.RemoveMyTooltip();
  var elementNewFloat = document.getElementById("NewFloat");
  var float = inputKeyFilter.parseFloat(input.value);
  if(inputKeyFilter.isNaN(float, input)){
   elementNewFloat.innerHTML = "";
   return;
  }
  elementNewFloat.innerHTML = float + " or localized value: " + float.toLocaleString();
 }
</script>
 New float: <span id="NewFloat"></span>
</body>
</html>

Also see my page "Float field:" of the example of the input key filter

Please make sure to include self-attribution whenever linking to one of your projects elsewhere on the web; otherwise, it's considered spam. — Nathan Tuggy, Jul 31 '15 at 02:33
Sorry, I don't understand what is "self-attribution". What I need to do? — Andrej, Jul 31 '15 at 05:20
Put a note of some sort near your links to clarify that you wrote them or whatever. — Nathan Tuggy, Jul 31 '15 at 05:22
For example to replace from 'Also see "Float field:" of the example of the input key filter' to 'Also see my page "Float field:" of the example of the input key filter'. Is correct? — Andrej, Jul 31 '15 at 05:41

score 0 · Answer 3 · answered Mar 01 '17 at 10:57

=> It will allow only single decimal dot (.)

=> It will only allow three digit decimal values after dot. you can modified by changing to {1,3} into below RegEx.

- (BOOL)textField:(UITextField *)textField shouldChangeCharactersInRange:(NSRange)range replacementString:(NSString *)string  {

        if (!string.length)
            return YES;

        NSString *newString = [textField.text stringByReplacingCharactersInRange:range withString:string];
        NSString *expression = @"^([0-9]+)?(\\.([0-9]{1,3})?)?$";
        NSRegularExpression *regex = [NSRegularExpression regularExpressionWithPattern:expression
                                                                               options:NSRegularExpressionCaseInsensitive
                                                                                 error:nil];
        NSUInteger numberOfMatches = [regex numberOfMatchesInString:newString
                                                            options:0
                                                              range:NSMakeRange(0, [newString length])];
        if (numberOfMatches == 0)
            return NO;


        return YES;

    }

score 0 · Accepted Answer · edited May 23 '17 at 12:17

0

If you were doing this in a bona fide iOS app, you could probably add buttons of your own on top of the keyboard, based on this question, which is about the accessory view but the same process would work.

Otherwise, IamChuckB is right and the five keyboard types given in the Apple Developer's Library are exhaustive.

edited May 23 '17 at 12:17

Community

1
1

answered Feb 09 '12 at 08:58

yuji

16,695
4
63
64

Showing an input that only allows numbers and the decimal point?

4 Answers4

Linked