[超牛]只能输入数字的文本框,兼容IE7IE8等
2015-05-28 22:55
399 查看
demo地址:
只能输入数字的文本框
核心js代码:
页面代码:
页面截图:
注意:(1)在IE7,IE8中,事件对象event没有charCode 属性;
在事件处理方法中,返回false或者设置event.returnValue 的值为false,表示阻止该事件的默认行为
作者:黄威
主页:黄威的技术博客
只能输入数字的文本框
核心js代码:
[code]/*
* 只能输入正整数,不能有小数点
*
*/
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();
}
};
/***
* [0-9]<br>
* 12:ok;1.2:error
* @param event
* @returns {boolean}
*/
onlyIntegerKeyPress = function onlyIntegerKeyPress(event) {
event = event || window.event || arguments.callee.caller.arguments[0];
//console.log(event);
var charCode2;
if ('charCode' in event) {//IE7 and IE8 no charCode
charCode2 = event.charCode;
} else {
//console.log('no charCode');
charCode2 = event.keyCode;
}
//console.log(charCode2);
if (event.keyCode === 8/*back*/ || event.keyCode === 13/*Enter*/ || event.keyCode === 9/*Tab*/ || event.keyCode === 37/*<- */ || event.keyCode === 39/* ->*/) {
return true;
} else if (charCode2 < 48 || charCode2 > 57) {/*0-9*/
event.returnValue = false;
return false;
} else {
return true;
}
};页面代码:
[code]<body>
只能输入数字: <input type="text" style="ime-mode:disabled;" onkeyup="onlyIntegerKeyUp(event)"
onKeyPress="return onlyIntegerKeyPress(event)"/><br>
</body>页面截图:
注意:(1)在IE7,IE8中,事件对象event没有charCode 属性;
在事件处理方法中,返回false或者设置event.returnValue 的值为false,表示阻止该事件的默认行为
作者:黄威
主页:黄威的技术博客
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 