Showing an input that only allows numbers and the

2019-04-04 08:35发布

问题:

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:

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.



回答2:

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.



回答3:

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



回答4:

=> 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;

    }