通过js实现:input 限制输入数字和小数点

时间: 2018-01-31阅读: 2607标签: 输入框

我们可以使用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>


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/410

纯css实现输入框placeholder动效及输入校验

话不多说,我们能否用纯css实现以下效果:答案是肯定的。借助css:placeholder-shown :valid :invalid伪类及html5 input pattern 属性就可以实现,:placeholder-shown伪类目前兼容性如下:

移动端H5页面_input获取焦点时,虚拟键盘挡住input输入框解决方法

在移动端h5开发的时候,发现如果input在页面底部,当触发input焦点的时候会弹出系统虚拟键盘,虚拟键盘会遮挡input输入框。这会很影响用户体验,于是在网上找到了如下的解决办法

js模拟实现输入框input事件

直接修改value值是无法触发对应元素的事件的。通过发送输入框input事件了, 可以触发。这里简单封装了一个方法.简单的调用:

小程序批量监听输入框,对按钮样式进行控制

在input组件上绑定data-model=\\\"xxx\\\" bindinput=\\\"inputWatch\\\",监听输入框输入:当输入11位手机号后,验证码按钮变为可点状态;当3个输入框都有值时(密码大于等于6位,手机11位)

textarea换行_在textarea中如何换行的实现总汇

html的textarea内容显示的时候怎么换行?输入的时候换了行,但是读取出来的时候是连在一起的,要怎么才可以显示换行?利用pre、替换 br 标签、直接在渲染标签元素上添加 white-space: pre-wrap | pre-line | pre

vue实现输入框的模糊查询(节流函数的应用场景)

首先,我们来理解一下:节流函数首先是节流,就是节约流量、内存的损耗,旨在提升性能,在高频率频发的事件中才会用到,比如:onresize,onmousemove,onscroll,oninput等事件中会用到节流函数;输入框的模糊查询功能原理分析

完美兼容实现:解决textarea输入框限制字数长度(带统计功能)

extarea称文本域【文本区】,即有滚动条的多行文本输入控件,在网页的提交表单中经常用到。textarea有maxlength属性,但是textarea不兼容ie8/9。如何实现textarea输入框限制字数长度的兼容问题呢?

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广