随笔 - 90  文章 - 0 评论 - 40 trackbacks - 3

JavaScript:只能输入数字(IE、FF)

为了解决只能输入数字的问题,网上有许多资料,现归拢一下。

  一、不带负号的输入

这里,没有解决“正负号”的问题。

由于“正负号”必须出现在数字的最前端,因此,必须要判断当前光标所在的位置是否在输入文本框的首位。

<script language="JavaScript" type="text/javascript" >
<!--
//调用方式:onkeydown = "DigitInput(this,event);"
function DigitInput(el,ev) {
//8:退格键、46:delete、37-40: 方向键
//48-57:小键盘区的数字、96-105:主键盘区的数字
//110、190:小键盘区和主键盘区的小数
//189、109:小键盘区和主键盘区的负号

    var event = ev || window.event;                             //IE、FF下获取事件对象
    var currentKey = event.charCode||event.keyCode;             //IE、FF下获取键盘码
   
    //小数点处理
    if (currentKey == 110 || currentKey == 190) {
        if (el.value.indexOf(".")>=0)
            if (window.event)                       //IE
                event.returnValue=false;                 //e.returnValue = false;效果相同.
            else                                    //Firefox
                event.preventDefault();

    } else
        if (currentKey!=8 && currentKey != 46 && (currentKey<37 || currentKey>40) && (currentKey<48 || currentKey>57) && (currentKey<96 || currentKey>105))
            if (window.event)                       //IE
                event.returnValue=false;                 //e.returnValue = false;效果相同.
            else                                    //Firefox
                event.preventDefault();

}
-->

</script> 

 

  二、带负号的输入

  判断带负号的输入,则必须要知道光标的位置,也就是说,只有当光标在最前端时,负号才有效。

<script language="JavaScript" type="text/javascript" >
<!--
//调用方式:onkeydown = "DigitInput(this,event);"
function DigitInput(el,ev) {
//8:退格键、46:delete、37-40: 方向键
//48-57:小键盘区的数字、96-105:主键盘区的数字
//110、190:小键盘区和主键盘区的小数
//189、109:小键盘区和主键盘区的负号

    var event = ev || window.event;                             //IE、FF下获取事件对象
    var currentKey = event.charCode||event.keyCode;             //IE、FF下获取键盘码
   
    //小数点处理
    if (currentKey == 110 || currentKey == 190) {
        if (el.value.indexOf(".")>=0)
            if (window.event)                       //IE
                event.returnValue=false;                 //e.returnValue = false;效果相同.
            else                                    //Firefox
                event.preventDefault();

    } else
        //负号处理
        if (currentKey == 189 || currentKey == 109) {
            if (getPosition(el)>0 || el.value.indexOf("-")>=0)
                if (window.event)                       //IE
                    event.returnValue=false;                 //e.returnValue = false;效果相同.
                else                                    //Firefox
                    event.preventDefault();
        } else
        if (currentKey!=8 && currentKey != 46 && (currentKey<37 || currentKey>40) && (currentKey<48 || currentKey>57) && (currentKey<96 || currentKey>105))
            if (window.event)                       //IE
                event.returnValue=false;                 //e.returnValue = false;效果相同.
            else                                    //Firefox
                event.preventDefault();

}
/**
  * 获取光标所在的字符位置
  * @param obj 要处理的控件, 支持文本域和输入框
  * @author hotleave
  */
function getPosition(obj){
    var result = 0;
    if(obj.selectionStart){ //非IE浏览器
        result = obj.selectionStart
    }else{                  //IE
        var rng;
        if(obj.tagName == "TEXTAREA"){ //如果是文本域
            rng = event.srcElement.createTextRange();
            rng.moveToPoint(event.x,event.y);
        }else{                         //输入框
            rng = document.selection.createRange();
        }
        rng.moveStart("character",-event.srcElement.value.length);
        result = rng.text.length;
    }
    return result;
}

-->

</script> 

getPosition(obj)函数,是一个获取光标位置的通用函数。

为了减少传入的参数,事件对象是可以通过事件获取的:

 var el = window.event.srcElement||ev.target;

 只需将传DigitInput(el,ev)的第一句加上上面这条语句,并且将传入参数只有ev一个即可,这样,减少了传入值。

  三、扩展

  我们可以增加一个传入的参数值,用于限定允许输入的数字条件:

1:允许正整数;2、允许正小数;3、允许负整数;4、允许负小数。

当然,传入一个正则表达式也可以实现。

 

 

function onlyNum() 

  
if(!( (event.keyCode >= 48 && event.keyCode<=57 )
        
||event.keyCode >= 96 && event.keyCode <= 105 )
        
|| ( event.keyCode == 8 )   //退格
        || ( event.keyCode == 46 ) //Del
        || ( event.keyCode == 27 ) //ESC
        || ( event.keyCode == 37 ) //
        || ( event.keyCode == 39 ) //
        || ( event.keyCode == 16 ) //shift
        || ( event.keyCode == 9 ) //Tab
       )
    ) 
//考虑小键盘上的数字键 
    event.returnValue=false
}

 

 

 

posted on 2009-03-04 14:06 steven_2005 阅读(1660) 评论(4) 编辑 收藏

FeedBack:
#1楼 2010-07-27 11:34 asins[未注册用户]
这写得相当不错,但有一点没有考虑到,就是第个字符就输入小数点时,应该是不能输入才对!加个条件就可以搞定了,
 回复 引用   
#2楼 2010-07-27 11:39 asins[未注册用户]
我进了一点点的修改,分享下

function DigitInput(el,e) {
//8:退格键、46:delete、37-40: 方向键
//48-57:小键盘区的数字、96-105:主键盘区的数字
//110、190:小键盘区和主键盘区的小数
//189、109:小键盘区和主键盘区的负号
var e = e || window.event; //IE、FF下获取事件对象
var cod = e.charCode||e.keyCode; //IE、FF下获取键盘码
//小数点处理
if (cod == 110 || cod == 190){
(el.value.indexOf(".")>=0 || !el.value.length) && notValue(e);
} else {
if(cod!=8 && cod != 46 && (cod<37 || cod>40) && (cod<48 || cod>57) && (cod<96 || cod>105)) notValue(e);
}
function notValue(e){
window.event ? e.returnValue=false : e.preventDefault();
}
}

 回复 引用   
#3楼 2010-07-27 14:24 asins[未注册用户]
@asins
更正一下~~
function DigitInput(el,e) {
//8:退格键、46:delete、37-40: 方向键
//48-57:小键盘区的数字、96-105:主键盘区的数字
//110、190:小键盘区和主键盘区的小数
//189、109:小键盘区和主键盘区的负号
var e = e || window.event; //IE、FF下获取事件对象
var cod = e.charCode||e.keyCode; //IE、FF下获取键盘码
//小数点处理
if (cod == 110 || cod == 190){
if(el.value.indexOf(".")>=0 || !el.value.length){notValue(e)}
} else {
if(cod!=8 && cod != 46 && (cod<37 || cod>40) && (cod<48 || cod>57) && (cod<96 || cod>105)){notValue(e)}
}
return el;

function notValue(e){
e.preventDefault ? e.preventDefault() : e.returnValue=false;
}
}

 回复 引用   
Hi,
有一点搞错了

48-57:小键盘区的数字、96-105:主键盘区的数字
要改为:
48-57:主键盘区的数字、96-105:小键盘区的数字

 回复 引用   
发表评论

昵称: [登录] [注册]

主页:

邮箱:(仅博主可见)

评论内容:

  登录  注册

[使用Ctrl+Enter键快速提交评论]

0 1402993 GGAGTYsRYhw=