Html 显示只允许数字和小数点的输入？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9204762/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Showing an input that only allows numbers and the decimal point?
提问by Stefan Kendall
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>只允许数字和小数点（或国际用户的逗号）的键盘输入？
<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
<input type='tel'>显示我不需要的电话废话，没有小数点<input type='number' pattern='[0-9]*'>显示所有数字，但没有小数点
What can I do to get the input I need?
我该怎么做才能获得我需要的输入？
采纳答案by yuji
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 Libraryare exhaustive.
否则，IamChuckB 是正确的，Apple Developer's Library中提供的五种键盘类型是详尽无遗的。
回答by Paris Char
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.
这将只允许带/不带小数点的数字和右侧的浮点数。
回答by Andrej
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 语言对您网页上的文本输入元素的值进行跨浏览器过滤器的项目：Input Key Filter。您可以将值过滤为整数、浮点数或编写自定义过滤器，例如电话号码过滤器。查看输入浮点数的代码示例
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Input Key Filter Test</title>
<meta name="author" content="Andrej Hristoliubov [email protected]">
<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
另请参阅我的页面“浮动字段：”输入键过滤器的示例
回答by Sandip Patel - SM
=> 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;
}
