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'  onkeyup="if( ! /^\d*(?:\.\d{0,2})?$/.test(this.value)){alert('只能輸入數字，小數點後只能保留兩位');this.value='';}" />

 

另外一種 更加的方便實用

就是 這個了， 直接能夠控制非負 數字的輸入，同時保留了2位小數

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

注意 type="number" 是必須的