显示仅允许数字和小数点的输入?

时间:2021-02-08 17: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?

我该怎么做才能得到我需要的输入?

4 个解决方案

#1


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.

如果你是在一个真正的iOS应用程序中这样做,你可以根据这个问题在键盘顶部添加你自己的按钮,这是关于附件视图,但相同的过程将起作用。

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

否则,IamChuckB是正确的,Apple开发人员库中给出的五种键盘类型都是详尽无遗的。

#2


4  

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

您可以在type =“number”字段中尝试此属性:

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

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

这将只允许带/不带小数点的数字和右边的浮点数。

#3


1  

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

请使用JavaScript语言查看我的网页上文本输入元素值的跨浏览器过滤器项目:输入密钥过滤器。您可以将值过滤为整数,浮点数或编写自定义过滤器,例如电话号码过滤器。请参阅输入代码的示例

<!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


0  

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

=>点后只允许三位十进制值。您可以通过将{1,3}更改为以下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;

    }

#1


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.

如果你是在一个真正的iOS应用程序中这样做,你可以根据这个问题在键盘顶部添加你自己的按钮,这是关于附件视图,但相同的过程将起作用。

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

否则,IamChuckB是正确的,Apple开发人员库中给出的五种键盘类型都是详尽无遗的。

#2


4  

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

您可以在type =“number”字段中尝试此属性:

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

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

这将只允许带/不带小数点的数字和右边的浮点数。

#3


1  

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

请使用JavaScript语言查看我的网页上文本输入元素值的跨浏览器过滤器项目:输入密钥过滤器。您可以将值过滤为整数,浮点数或编写自定义过滤器,例如电话号码过滤器。请参阅输入代码的示例

<!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


0  

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

=>点后只允许三位十进制值。您可以通过将{1,3}更改为以下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;

    }