有一个快速的方法来设置HTML文本输入(<input type=text />),只允许数字击键(加上'.')?
当前回答
我看到过很多用javascript回答这个问题的问题,但最好的答案是使用type="number",并使用css删除旋转按钮,为什么需要这样做的大部分原因是旋转按钮在使用时不会发出更改事件。
解决方案:
HTML
<input type="number" class="input-class">
CSS
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Firefox */
input[type=number] {
-moz-appearance: textfield;
}
其他回答
给输入字段一个类(<input class="digit"…>)和使用jquery如下所示。
jQuery(document).ready(function () {
jQuery('input.digit').live('input keyup',function(e){ jQuery(this).val(jQuery(this).val().replace( /[^\d]/g ,'')); });
});
上面的代码还可以禁用Ctrl+V笔画和右键单击笔画中的特殊字符。
这里有一个简单的例子,它只允许有一个小数,不能再多了。输入事件使用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。
我用完了这个函数:
onkeypress="if(event.which < 48 || event.which > 57 ) if(event.which != 8) return false;"
这在IE和Chrome中工作得很好,我不知道为什么它在firefox中也不工作得很好,这个功能在firefox中阻止了tab键。
对于tab键在firefox中工作很好,添加这个:
onkeypress="if(event.which < 48 || event.which > 57 ) if(event.which != 8) if(event.keyCode != 9) return false;"
你可以使用pattern:
<input id="numbers" pattern="[0-9.]+" type="number">
在这里你可以看到完整的手机网站界面提示。
只是使用jQuery的另一个变体
$(".numeric").keypress(function() {
return (/\d/.test(String.fromCharCode(event.which) ))
});
推荐文章
- 使伸缩项目正确浮动
- Babel 6改变了它导出默认值的方式
- 如何配置历史记录?
- ES6模板文字可以在运行时被替换(或重用)吗?
- [Vue警告]:找不到元素
- 可以在setInterval()内部调用clearInterval()吗?
- AngularJS控制器的生命周期是什么?
- 无法读取未定义的属性“msie”- jQuery工具
- 形式内联内的形式水平在twitter bootstrap?
- 我的蛋蛋怎么不见了?
- JavaScript中的排列?
- 自定义元素在HTML5中有效吗?
- JavaScript中有睡眠/暂停/等待功能吗?
- 如何触发自动填充在谷歌Chrome?
- jQuery:执行同步AJAX请求