进行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替换非法字符之后,光标的位置变化了.所以这两个方法用于在替换之前保存(记录)光标位置,替换之后恢复光标位置.
