html文本框只能输入数字博客分类： javascript 只能输入数字onlyIntegerKeyUp前端校验获取光标

程序员文章站 2024-02-24 08:48:36

...

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

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

界面:
html文本框只能输入数字

博客分类： javascript 只能输入数字onlyIntegerKeyUp前端校验获取光标
第一个文本框,输入字母时会立即把字母替换为空字符串.

核心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);
	}
};

页面代码:

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

comm.js见附件