有一个快速的方法来设置HTML文本输入(<input type=text />),只允许数字击键(加上'.')?
当前回答
2个解决方案:
使用表单验证器(例如jQuery验证插件)
在输入字段的onblur事件期间(即当用户离开字段时)执行检查,使用正则表达式:
<script type="text/javascript">
function testField(field) {
var regExpr = new RegExp("^\d*\.?\d*$");
if (!regExpr.test(field.value)) {
// Case of error
field.value = "";
}
}
</script>
<input type="text" ... onblur="testField(this);"/>
其他回答
这里有一个简单的例子,它只允许有一个小数,不能再多了。输入事件使用regex替换基于以下两种模式的文本:
删除任何不是数字或点的东西 删除点的任何第二个实例
<input type="text" oninput="this. "Value = this.value.replace(/[^0-9。.replace) / g,”) (/(\..*?)\..* / g, 1美元);”/>
正如下面有人评论的那样,上面的解决方案不处理前导零。如果你的特定用例要求这些是不允许的,你可以像这样添加到上面的模式:
<input type="text" oninput="this. "Value = this.value.replace(/[^0-9。.replace) / g,”) (/(\..*?)\..* / g, 1美元).replace(/ ^ 0 ^。] /, ' 0 ');“/>
这将允许0.123或。123,但不允许0123或00.123。
我一直在努力寻找一个好的答案,我们迫切需要<input type="number",但除此之外,这2个是我能想出的最简洁的方法:
<input type="text"
onkeyup="this.value=this.value.replace(/[^\d]/,'')">
如果您不喜欢未被接受的字符在被擦除之前显示一秒钟,下面的方法是我的解决方案。注意许多附加条件,这是为了避免禁用各种导航和热键。如果有人知道如何紧实这个,让我们知道!
<input type="text"
onkeydown="return ( event.ctrlKey || event.altKey
|| (47<event.keyCode && event.keyCode<58 && event.shiftKey==false)
|| (95<event.keyCode && event.keyCode<106)
|| (event.keyCode==8) || (event.keyCode==9)
|| (event.keyCode>34 && event.keyCode<40)
|| (event.keyCode==46) )">
如果你可以使用插件,这里有一个我测试过的。除了膏体外,效果很好。
数字输入
这里是一个演示http://jsfiddle.net/152sumxu/2
下面的代码(库内粘贴)
<div id="plugInDemo" class="vMarginLarge">
<h4>Demo of the plug-in </h4>
<div id="demoFields" class="marginSmall">
<div class="vMarginSmall">
<div>Any Number</div>
<div>
<input type="text" id="anyNumber" />
</div>
</div>
</div>
</div>
<script type="text/javascript">
// Author: Joshua De Leon - File: numericInput.js - Description: Allows only numeric input in an element. - If you happen upon this code, enjoy it, learn from it, and if possible please credit me: www.transtatic.com
(function(b) {
var c = { allowFloat: false, allowNegative: false};
b.fn.numericInput = function(e) {
var f = b.extend({}, c, e);
var d = f.allowFloat;
var g = f.allowNegative;
this.keypress(function(j) {
var i = j.which;
var h = b(this).val();
if (i>0 && (i<48 || i>57)) {
if (d == true && i == 46) {
if (g == true && a(this) == 0 && h.charAt(0) == "-") {
return false
}
if (h.match(/[.]/)) {
return false
}
}
else {
if (g == true && i == 45) {
if (h.charAt(0) == "-") {
return false
}
if (a(this) != 0) {
return false
}
}
else {
if (i == 8) {
return true
}
else {
return false
}
}
}
}
else {
if (i>0 && (i >= 48 && i <= 57)) {
if (g == true && h.charAt(0) == "-" && a(this) == 0) {
return false
}
}
}
});
return this
};
function a(d) {
if (d.selectionStart) {
return d.selectionStart
}
else {
if (document.selection) {
d.focus();
var f = document.selection.createRange();
if (f == null) {
return 0
}
var e = d.createTextRange(), g = e.duplicate();
e.moveToBookmark(f.getBookmark());
g.setEndPoint("EndToStart", e);
return g.text.length
}
}
return 0
}
}(jQuery));
$(function() {
$("#anyNumber").numericInput({ allowFloat: true, allowNegative: true });
});
</script>
你也可以比较输入值(默认情况下被视为字符串)和它本身被强制为数字,比如:
if(event.target.value == event.target.value * 1) {
// returns true if input value is numeric string
}
然而,你需要绑定到事件,如keyup等。
有一个很好的解决方案。删除前导零,设置自然位和小数点后的最大位数,处理复制粘贴,确保它是一个数值。
this.value = this.value
.replace(/\b0+/g, '')
.replace(/[^0-9.]/g, '')
.replace(/(\..*?)\..*/g, '$1')
.replace(/([0-9]{0,6}(\.[0-9]{0,2})?).*/g, '$1')
最后替换设置小数点和自然位的长度。只需将标记替换为您喜欢的值。
.replace (/ ([0 - 9] {0, < max_natural >} (\ [0 - 9] {0, < max_decimal >}) ?)。* / g, 1美元)
推荐文章
- 使伸缩项目正确浮动
- Babel 6改变了它导出默认值的方式
- 如何配置历史记录?
- ES6模板文字可以在运行时被替换(或重用)吗?
- [Vue警告]:找不到元素
- 可以在setInterval()内部调用clearInterval()吗?
- AngularJS控制器的生命周期是什么?
- 无法读取未定义的属性“msie”- jQuery工具
- 形式内联内的形式水平在twitter bootstrap?
- 我的蛋蛋怎么不见了?
- JavaScript中的排列?
- 自定义元素在HTML5中有效吗?
- JavaScript中有睡眠/暂停/等待功能吗?
- 如何触发自动填充在谷歌Chrome?
- jQuery:执行同步AJAX请求