Showing an input that only allows numbers and the

2019-04-04 08:35发布

站内问答 / Html5
1181 4 6

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?

4条回答
Ridiculous、
2楼-- · 2019-04-04 09:12

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.

查看更多
0人赞 添加讨论(0) 举报
Melony?
3楼-- · 2019-04-04 09:19

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

查看更多
0人赞 添加讨论(0) 举报
虎瘦雄心在
4楼-- · 2019-04-04 09:19

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

    }
查看更多
0人赞 添加讨论(0) 举报
唯我独甜
5楼-- · 2019-04-04 09:21

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.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)