有一个快速的方法来设置HTML文本输入(<input type=text />),只允许数字击键(加上'.')?
当前回答
对于喜欢说俏皮话的人。
string.replace(/[^\d\.]/g, '').replace(/^\.*/, '').replace(/(\.\d{0,2})(.*)/, '$1');
我在输入type="text"上使用这段代码,并使用AngularJS在按键时激活,但如果喜欢,可以使用jQuery。只需将此代码放入一个函数中,该函数以某种方式通过按键激活。
它只允许数字,数字+十进制,数字+十进制+数字。
CODE
YourString.replace(/[^\d\.]/g, '').replace(/^\.*/, '').replace(/(\.\d{0,2})(.*)/, '$1');
testOne = "kjlsgjkl983724658.346.326.326..36.346"
=> "983724658.34";
testTwo = ".....346...3246..364.3.64.2346......"
=> "346.";
testThree = "slfdkjghsf)_(*(&^&*%^&%$%$%^KJHKJHKJKJH3"
=> "3";
testFour = "622632463.23464236326324363"
=> "622632463.23";
这是为美国货币构建的,但它可以更改为允许超过两个小数点后的第一个小数,如下所示…
改变了代码
YourString.replace(/[^\d\.]/g, '').replace(/^\.*/, '').replace(/(\.\d*)(.*)/, '$1');
testFour = "dfskj345346346.36424362jglkjsg....."
=> "345346346.36424362";
:)
其他回答
这是一个改进的函数:
function validateNumber(evt) {
var theEvent = evt || window.event;
var key = theEvent.keyCode || theEvent.which;
if ((key < 48 || key > 57) && !(key == 8 || key == 9 || key == 13 || key == 37 || key == 39 || key == 46) ){
theEvent.returnValue = false;
if (theEvent.preventDefault) theEvent.preventDefault();
}
}
JavaScript代码:
function validate(evt)
{
if(evt.keyCode!=8)
{
var theEvent = evt || window.event;
var key = theEvent.keyCode || theEvent.which;
key = String.fromCharCode(key);
var regex = /[0-9]|\./;
if (!regex.test(key))
{
theEvent.returnValue = false;
if (theEvent.preventDefault)
theEvent.preventDefault();
}
}
}
HTML代码:
<input type='text' name='price' value='0' onkeypress='validate(event)'/>
工作完美,因为退格键码是8,正则表达式不让它,所以这是一个简单的方法来绕过bug:)
input type="number"是一个HTML5属性。
在另一种情况下,这将帮助你:
function isNumberKey(evt){
var charCode = (evt.which) ? evt.which : evt.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 57))
return false;
return true;
}
<input type="number" name="somecode" onkeypress="return isNumberKey(event)"/>
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);"/>
使用这个DOM
<input type='text' onkeypress='validate(event)' />
这个脚本
function validate(evt) {
var theEvent = evt || window.event;
// Handle paste
if (theEvent.type === 'paste') {
key = event.clipboardData.getData('text/plain');
} else {
// Handle key press
var key = theEvent.keyCode || theEvent.which;
key = String.fromCharCode(key);
}
var regex = /[0-9]|\./;
if( !regex.test(key) ) {
theEvent.returnValue = false;
if(theEvent.preventDefault) theEvent.preventDefault();
}
}
推荐文章
- 使伸缩项目正确浮动
- Babel 6改变了它导出默认值的方式
- 如何配置历史记录?
- ES6模板文字可以在运行时被替换(或重用)吗?
- [Vue警告]:找不到元素
- 可以在setInterval()内部调用clearInterval()吗?
- AngularJS控制器的生命周期是什么?
- 无法读取未定义的属性“msie”- jQuery工具
- 形式内联内的形式水平在twitter bootstrap?
- 我的蛋蛋怎么不见了?
- JavaScript中的排列?
- 自定义元素在HTML5中有效吗?
- JavaScript中有睡眠/暂停/等待功能吗?
- 如何触发自动填充在谷歌Chrome?
- jQuery:执行同步AJAX请求