我们可以使用html5的type="number"来限制input只能输入数字类型，但是会存在一定的兼容问题，而且在浏览器样式上会出现上下箭头的标示，显然这不是我们需要的，这篇文章就整理关于使用js来限制input的输入类型为数字和小数点的实现。

方法一：

<input type="text" onkeyup="clearNoNum(this)">
<script>
function clearNoNum(obj){ 
    obj.value = obj.value.replace(/[^\d.]/g,"");  //清除“数字”和“.”以外的字符  
    obj.value = obj.value.replace(/\.{2,}/g,"."); //只保留第一个. 清除多余的  
    obj.value = obj.value.replace(".","$#$").replace(/\./g,"").replace("$#$","."); 
    obj.value = obj.value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3');//只能输入两个小数  
    if(obj.value.indexOf(".")< 0 && obj.value !=""){//以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额 
        obj.value= parseFloat(obj.value); 
    } 
} 
</script>

方法二：

<input type="text" onkeypress="return WST.isNumberdoteKey(event)" onblur="javascript:WST.limitDecimal(this,2)" onkeyup="javascript:WST.isChinese(this,1)">
<script>
WST = {};
WST.isNumberdoteKey = function(evt) {
	var e = evt || window.event;
	var srcElement = e.srcElement || e.target;
	var charCode = (evt.which) ? evt.which : event.keyCode;
	if(charCode > 31 && ((charCode < 48 || charCode > 57) && charCode != 46)) {
		return false;
	} else {
		if(charCode == 46) {
			var s = srcElement.value;
			if(s.length == 0 || s.indexOf(" . ") != -1) {
				return false;
			}
		}
		return true;
	}
}
WST.limitDecimal = function(obj, len) {
	var s = obj.value;
	if(s.indexOf(". ") > -1) {
		if((s.length - s.indexOf(". ") - 1) > len) {
			obj.value = s.substring(0, s.indexOf(". ") + len + 1);
		}
	}
	s = null;
}
WST.isChinese = function(obj, isReplace) {
	var pattern = /[\u4E00-\u9FA5]|[\uFE30-\uFFA0]/i
	if(pattern.test(obj.value)) {
		if(isReplace) obj.value = obj.value.replace(/[\u4E00-\u9FA5]|[\uFE30-\uFFA0]/ig, " ");
		return true;
	}
	return false;
}
</script>

本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！

链接: https://fly63.com/article/detial/410