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?
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.
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.
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
=> 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;
}