jquery限制文本框只能输入数字的方法,适用多种浏览器

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%
       String path=request.getContextPath();
%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<!--  oninput方法适用于html5、以及高版本的ie浏览器,不能直接写在input框里,需要用bind绑定-->
   <form action="#">
      邮编:<input id="code" name="code" type="text" value="I"  class="num">
     手机号:<input type="text" id="telephone" name="telephone" value="❤"  maxlength="11" style="color:red" class="num">
     金额:<input type="text" id="money" name="money" id="money" value="You"  class="money">
    <!--  <br> -->
     <input type="button" value="喜欢我就点我吧☺" id="button">
    </form>


</body>
</html>
      <script type="text/javascript" src="<%=path%>/js/importjs/jquery-3.1.0.min.js"></script>
      <script type="text/javascript" src="<%=path%>/js/importjs/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript">


//----------------只能输入数字 Start
/*调用    '/限制的正则表达式/g'   必须以/开头,/g结尾
 *  onkeyup="replaceAndSetPos(this,/[^0-9]/g,'')" oninput ="replaceAndSetPos(this,/[^0-9]/g,'')"
 */
//获取光标位置
function getCursorPos(obj) {   
    var CaretPos = 0;   
    // IE Support   
    if (document.selection) {   
        obj.focus (); //获取光标位置函数   
        var Sel = document.selection.createRange ();   
        Sel.moveStart ('character', -obj.value.length);  
        CaretPos = Sel.text.length;   
    }   
    // Firefox/Safari/Chrome/Opera support   
    else if (obj.selectionStart || obj.selectionStart == '0')   
        CaretPos = obj.selectionEnd;   
    return (CaretPos);   
}   
//定位光标    
function setCursorPos(obj,pos)   
{   
    if (obj.setSelectionRange) { //Firefox/Safari/Chrome/Opera  
        obj.focus(); //  
        obj.setSelectionRange(pos,pos);   
    } else if (obj.createTextRange) { // IE  
        var range = obj.createTextRange();   
        range.collapse(true);   
        range.moveEnd('character', pos);   
        range.moveStart('character', pos);   
        range.select();   
    }   
}   
//替换后定位光标在原处,可以这样调用onkeyup=replaceAndSetPos(this,/[^/d]/g,'');     
function replaceAndSetPos(obj,pattern,text){
    if ($(obj).val() == "" || $(obj).val() == null) {
        return;
    }
    var pos=getCursorPos(obj);//保存原始光标位置   
    var temp=$(obj).val(); //保存原始值   
    obj.value=temp.replace(pattern,text);//替换掉非法值   
    //截掉超过长度限制的字串(此方法要求已设定元素的maxlength属性值)  
    var max_length = obj.getAttribute? parseInt(obj.getAttribute("maxlength")) : "";  
    if( obj.value.length > max_length){  
            var str1 = obj.value.substring( 0,pos-1 );  
        var str2 = obj.value.substring( pos,max_length+1 );  
        obj.value = str1 + str2;  
    }  
    pos=pos-(temp.length-obj.value.length);//当前光标位置   
    setCursorPos(obj,pos);//设置光标   
    //el.onkeydown = null;
}   
 //-----------------只能输入数字 end


 $(function(){
     //绑定oninput事件 只能输入数字  propertychange低版本ie的方法
      $(function(){
          //邮箱 手机号
           $(".num").each(function(){
              $(this).bind('input propertychange',function(){
                  replaceAndSetPos(this,/[^0-9]/g,'');
              })
          });
          //金额
          $(".money").bind('input propertychange',function(){
              replaceAndSetPos(this,/[^\-?0-9\.]/g,'');
          });
          
          
      });
 });
 
 
 
 
 
 
 
 
 
 $("#button").click(function(){
     alert("老婆大人,您别生气了,不要不bird我好不好")
 });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

</script>
展开阅读全文

没有更多推荐了,返回首页