input 控制只能输入非负金额的另一种方式

今天看了看，前端同事的代码，居然发现了 他的控制 金额 输入的方式，挺好的，学习一下了。

下面是代码

<td>金额 : </td>
				<td>
					<span class="webname">
						<input name="amount" type="text" id="amount" onkeyup="onlyNumber(this)"  value="$!upDate.amount" size="40" />
          			</span> <span style="color: red;font-weight: bold;">*</span>
				</td> 


js :

function onlyNumber(obj){    
        
        //得到第一个字符是否为负号    
        var t = obj.value.charAt(0);      
        //先把非数字的都替换掉，除了数字和.     
        obj.value = obj.value.replace(/[^\d\.]/g,'');       
         //必须保证第一个为数字而不是.       
         obj.value = obj.value.replace(/^\./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(t == '-'){    
              
           return;  
         }    

    } 

 

这个是后台页面，大家把重点放在 js 好吧。 他这里写是  能输入 - 负号，其实是不可以的.

 

另一种方式

当然如果 不要求那么高体验的话， 也可以这样 

只能输入 数字，
 保留2位小数
 onkeyup="if(isNaN(value))execCommand('undo')" 
 
 onchange="changeInput()" 
 
function changeInput(){
	var $value= $("#"+id).val();
	
	if( $.trim($value)=="" || isNaN($value) ){
		$("#"+id).val("");
		return ;
	}
	
	$("#"+id).val(parseFloat($value).toFixed(2));
	
}

// 使用改变事件，强行变为 有两位小数的 值

 

var testMoney=/(^[1-9](\d+)?(\.\d{1,2})?$)|(^(0){1}$)|(^\d\.\d{1,2}?$)/; //正则金额 
		$("#money").bind("input propertychange", function(){  

     var nowMoney=$("#money").val();
			if(nowMoney==""){
				
				return;
			}

          if(!testMoney.test(nowMoney)){
				if( nowMoney.substring(nowMoney.length-1,nowMoney.length)=="."
				&& nowMoney.indexOf(".")== (nowMoney.length-1) ){
					// 说明此时最后是 点号，金额没有输入完
					return;
				}
				$("#money").val("");
				return  ;
			}



});  

 

另一种更方便的：

只能有两位小数，再次校验是否是数字即可

<input type="text" name="price" id='price'  οnkeyup="if( ! /^\d*(?:\.\d{0,2})?$/.test(this.value)){alert('只能输入数字，小数点后只能保留两位');this.value='';}" />

 

另一种 更加的方便实用

就是 这个了， 直接可以控制非负 数字的输入，同时保留了2位小数

<input type="number" name="FirstName"  οnkeyup="this.value = this.value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3');"  />

注意 type="number" 是必须的

 

 

 

 

转载于:https://my.oschina.net/ouminzy/blog/1844965