jquery 實現input只輸入數字及控制輸入字數
阿新 • • 發佈:2019-01-29
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 />
直接如此即可。