html文本框只能输入数字-阿里云开发者社区

html文本框只能输入数字

2016-05-10 3406

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介：

进行web前端开发,会经常遇到校验文本框内容的情形.比如校验用户输入的手机号是否合法.

其实我们可以从根本上减少用户犯错的机会,比如文本框只能输入数字,若输入非数字字符,则马上被删除.

界面:

第一个文本框,输入字母时会立即把字母替换为空字符串.

核心js方法:

   Js代码  
    
  
/* 
 * 只能输入正整数,不能有小数点 
 *  
 */  
onlyIntegerKeyUp=function(e){  
    if(e===undefined){  
        e=window.event;  
    }  
    var obj=e.srcElement?e.srcElement:e.target;  
    var pattern = /[^\d]/ig;  
    var val=obj.value;  
    if(pattern.test(val)) {  
        var i=getCursortPosition(e);  
        obj.value=val.replace(pattern,'');  
        setCaretPosition(e,i);  
    }  
};  
/******************************************************************************* 
 * 获取光标位置 
 *  
 * @param ctrl 
 * @returns {Number} 
 */  
getCursortPosition=function(event) {// 获取光标位置函数  
    if (event === undefined || event === null) {  
        event = arguments.callee.caller.arguments[0] || window.event;  
    }  
    var obj = event.srcElement?event.srcElement:event.target;  
    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;  
    } else if (obj.selectionStart || obj.selectionStart == '0'){  
        // Firefox support  
        CaretPos = obj.selectionStart;  
    }  
  
    return (CaretPos);  
};  
/******************************************************************************* 
 * 设置光标位置 
 *  
 * @param ctrl 
 * @returns {Number} 
 */  
setCaretPosition=function(event, pos){// 设置光标位置函数  
    if (event === undefined || event === null) {  
        event = arguments.callee.caller.arguments[0] || window.event;  
    }  
    var obj = event.srcElement?event.srcElement:event.target;  
    if (pos > 0) {  
        pos = pos - 1;//因为把不匹配的字符删除之后,光标会往后移动一个位置  
    }  
    if(obj.setSelectionRange){  
        obj.focus();  
        obj.setSelectionRange(pos,pos);  
    } else if (obj.createTextRange) {  
        var range = obj.createTextRange();  
        range.collapse(true);  
        range.moveEnd('character', pos);  
        range.moveStart('character', pos);  
        range.select();  
    }  
};  
/* 
 * 只能输入数字和字母 
 *  
 */  
onlyNumAndAlphKeyUp=function(event){  
    if(event===undefined){  
        event=window.event;  
    }  
    var obj=event.srcElement?event.srcElement:event.target;  
    var pattern = /[^\w]/ig;  
    if(pattern.test(obj.value)) {  
        var i=getCursortPosition(event);  
        obj.value=obj.value.replace(pattern,'');  
        setCaretPosition(event,i);  
    }  
};  

页面代码:

   Html代码  
    
  
<!DOCTYPE html>  
<html>  
<head lang="en">  
    <meta charset="UTF-8">  
    <title></title>  
    <script type="application/javascript" src="jquery-1.11.1.js"></script>  
    <script type="application/javascript" src="comm.js"></script>  
</head>  
<body>  
只能输入数字: <input type="text" onkeyup="onlyIntegerKeyUp(event)"/><br>  
<br>  
只能输入数字和字母: <input type="text" onkeyup="onlyNumAndAlphKeyUp(event)"/><br>  
</body>  
</html>  

为什么会有getCursortPosition()和setCaretPosition()

因为通过js替换非法字符之后,光标的位置变化了.所以这两个方法用于在替换之前保存(记录)光标位置,替换之后恢复光标位置.

html文本框只能输入数字

热门文章

最新文章

相关课程

相关电子书

相关实验场景