1. 程式人生 > >jquery 實現input只輸入數字及控制輸入字數

jquery 實現input只輸入數字及控制輸入字數

id:<input  type="text" name="id" id="id" >
<span style="display:none;border:0" id="t1" >請輸入數字</span>
<script type="text/javascript">
$("#id").keyup(function(){
    	var c=$(this);
    	if(/[^\d]/.test(c.val())){
    		var temp=c.val().replace(/[^\d]/g,'');
    		$(this).val(temp);
    		$("#t1").css({'display':'block'});
    	}else{
    		$("#t1").css({'display':'none'});
    	}
</script>

這樣就實現了輸入框裡只能輸入數字,當輸入的不是數字時就會提示 “輸入數字”並清空輸入框裡的內容。

控制輸入長度也類似

使用者名稱:<input type="text" name="username" id="username" >
<span style="display:none;border:0;float:right;margin-right:50px" id="t2" >使用者名稱長度為3-6位</span>
$("#username").blur(function(){
    	
    		var d=$(this);
    		if(d.val().length<3||d.val().length>6){
    			
    		 $(this).val('');
    		
    		 $("#t2").css({'display':'block'});
        	}else{
        		$("#t2").css({'display':'none'});
    		}
    	})

.blur事件是失去焦點事件,當輸入框失去焦點即游標移出輸入框就會執行此函式

.val()是jq獲取元素的值的函式

如果不用jq,實現input只輸入數字方法如下:

id:<input type="text" name="id" id="id" onkeyup="value=value.replace(/[^\d]/g, '')"/><br />
直接如此即可。