有一个快速的方法来设置HTML文本输入(<input type=text />),只允许数字击键(加上'.')?
当前回答
一个使用jQuery和replace()而不是查看事件的简短而甜蜜的实现。keyCode或event.which:
$('input.numeric').live('keyup', function(e) {
$(this).val($(this).val().replace(/[^0-9]/g, ''));
});
只有一个小的副作用,输入的字母出现暂时和CTRL/CMD + A似乎表现有点奇怪。
其他回答
Use:
<script>
function onlyNumber(id){
var DataVal = document.getElementById(id).value;
document.getElementById(id).value = DataVal.replace(/[^0-9]/g,'');
}
</script>
<input type="text" id="1" name="1" onChange="onlyNumber(this.id);">
如果你想在按下键后更新一个值,你可以改变onChange为onKeypress, onKeyDown或onKeyup。但是事件onKeypress不会在任何浏览器中运行。
我一直在努力寻找一个好的答案,我们迫切需要<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) )">
HTML5有<input type=number>,这听起来很适合你。目前,只有Opera原生支持它,但有一个项目有一个JavaScript实现。
JavaScript
function validateNumber(evt) {
var e = evt || window.event;
var key = e.keyCode || e.which;
if (!e.shiftKey && !e.altKey && !e.ctrlKey &&
// numbers
key >= 48 && key <= 57 ||
// Numeric keypad
key >= 96 && key <= 105 ||
// Backspace and Tab and Enter
key == 8 || key == 9 || key == 13 ||
// Home and End
key == 35 || key == 36 ||
// left and right arrows
key == 37 || key == 39 ||
// Del and Ins
key == 46 || key == 45) {
// input is VALID
}
else {
// input is INVALID
e.returnValue = false;
if (e.preventDefault) e.preventDefault();
}
}
你可以添加逗号,句号和减号(,.-)
// comma, period and minus, . on keypad
key == 190 || key == 188 || key == 109 || key == 110 ||
HTML
<input type="text" onkeydown="validateNumber(event);"/ >
只是使用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请求