jquery封装 [ 限制文本框只能输入数字和小数] 语句，简单调用即可

最新推荐文章于 2023-09-23 11:42:50 发布

原创最新推荐文章于 2023-09-23 11:42:50 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #js #整数 #小数

JavaScript 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何使用jQuery来封装一个功能，通过添加`numOnly`和`decimalOnly`属性，轻松控制文本框只允许输入整数或小数。详细使用说明和代码示例帮助开发者快速实现这一功能。

使用说明：

文本框添加 numOnly 属性，属性值为 true 或者 false,当属性为true时，该文本框只能输入数字且不可以为小数；

文本框添加 decimalOnly属性，属性值为 true 或者 false,当属性为true时，该文本框只能输入数字且可以为小数；

功能介绍：

通过添加一个自定义属性，限制文本框只能输入数字或者小数。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jquery封装 [ 限制文本框只能输入数字和小数] 语句，简单调用即可</title>
<script src="../../js/jquery-1.9.0.min.js"></script>
<script language="javascript">

	 /*
	  * 页面文本框check
	  * numOnly  true : 文本框只可以输入整数(不含小数)  false : 不添加check
	  * decimalOnly  true : 文本框只可以输入整数(包含小数)  false : 不添加check
	  */
	 $(document).ready(function(){
		 /*
		  * 文本框输入数字check
		  */
		 $("input").each(function(){
			 if ($(this).attr("numOnly") == "true") { //只可以输入数字（整数）
				 $(this).bind('keyup',function(){this.value = this.value.replace(/\D/g,'');}); 
				 $(this).bind("blur",function(){this.value=this.value.replace(/\D/g,'');});
			 }
			 
			 if ($(this).attr("decimalOnly") == "true") { //只可以输入数字（整数或小数）
				 $(this).bind('keyup',function(){this.value = this.value.match(/^[+-]?\d*\.?\d*$/) ? this.value : checkDecimal(this.value);});  
				 $(this).bind('blur',function(){this.value = this.value.match(/^[\-]?\d*?\.?\d*$/) ? this.value : checkDecimal(this.value);});  
			 }
		 /*
		  * 把除了整数之外的去掉  
		  */
		 function checkDecimal(value){ 
			 var newValue = value[0]; 
			 var returnValue = "";
			 for (var i =1; i <= value.length; i++) {
				 if(!newValue.match(/^[\-]?\d*?\.?\d*$/)){  
					 break;
				 }
				 returnValue = newValue;
				 newValue += value[i];
			 } 
			 return returnValue;
		 }   
 	});
});



</script>
</head>

<body>
<input type="text"  numOnly="true" placeholder="输入整数(不能为小数)"/>  <!--只能输入整数(不能为小数)--->
<input type="text"  decimalOnly="true"placeholder="输入数字(可以是小数)" /><!--只能输入数字(可以是小数)--->  
</body>
</html>