本文转自:http://www.cnblogs.com/ly5201314/archive/2009/03/04/1402993.html

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; 
}

[转]JavaScript:只能输入数字(IE、FF)相关推荐

  1. html javaScript 只能输入数字

    /**获取组件选中的内容 */ function getSelectText(obj) {if (window.getSelection) {if (obj.selectionStart != und ...

  2. JS只能输入数字和小数点

    javascript 替换函数全部替换方法 <script language="javascript"> var strM = "javascript is ...

  3. 用 JavaScript 验证只能输入数字,并做数字加总

    开发系统时,常会需要将使用者在多个 TextBox 中输入的数字,做加总的计算,此时必须验证使用者只能输入数字.如下图 1 所示,有时可能还需要用 JavaScript 做数字的实时加总计算,并将计算 ...

  4. javascript实现文本框只能输入数字和字母

    以前曾经用javascript写过验证文本框只能输入小数(需要保留两位小数点)的例子,记得主要是通过判断eventkey或evencode来实现的,最经接手别人的项目要增加对文本框进行验证,只能输入数 ...

  5. php文本输入数字,JavaScript实现文本框只能输入数字的方法介绍

    在我们日常开发中,为了更好的给用户带来体验,我们有的时候需要限制文本框输入内容的类型,这里我们很多时候都会使用到正则表达式来完成,今天我们就给大家介绍下JavaScript实现文本框只能输入数字.小数 ...

  6. 【 javascript】<input> 实现输入框只能输入数字(个人认为最好的)

    <input> 实现输入框只能输入数字 需求背景: 方案一:使用`JS`限制 input 输入框只能输入纯数字 方案二:`VUE`使用`a-input-number组件`限制 input ...

  7. js只能输入数字,小数点(整理)

    <html> <head> <meta http-equiv="content-Type" content="text/html;chars ...

  8. js控制只能输入数字和小数点

    非常好用,代码示例如下: <input  onkeypress = "return event.keyCode>=48&&event.keyCode<=57 ...

  9. 控制HTML Input只能输入数字和小数点

    转:https://www.cnblogs.com/esion/p/3342866.html 本文介绍三种控制在中只允许输入数字和小数点的方案. 方案1:通过JavaScript代码实现. JavaS ...

最新文章

  1. Run-Time Check Failure #2
  2. 【设计模式】学习笔记---单例模式
  3. python程序设计与应用教程鄂大伟_鄂大伟-从零进阶的Python教学与开发之路.pdf
  4. 修改用户和用户组权限
  5. 在product search result里点击某个product出现白屏问题
  6. 完全内核移植–kernel3.15.3
  7. Mac上最好的Markdown文本编辑器_编辑工具
  8. table tr th td
  9. 厦门one_理想ONE真是“500万内最好的车”?
  10. var s=+newDate();的用法,表示对应的时间截
  11. 项目使用ts辅助_启动辅助项目后的前100天该做什么
  12. 008_MAC 终端使用技巧
  13. JS 导出excel文件流
  14. 台式计算机常用总线,计算机中常见的总线有哪些
  15. 安静的秋千 ,晚上不睡早晨不起精彩回帖汇总
  16. matlab 阻尼牛顿法
  17. android 录屏工具,android实现录屏小功能
  18. Effective Approaches to Attention-based Neural Machine Translation
  19. laravel中外部定义whereIn的用法和where中使用in
  20. 解读:机器学习预测收益模型应该采取哪种度量指标

热门文章

  1. 如何有效申请TI的免费样片
  2. IntelliJ IDEA 学习笔记
  3. C++面试宝典 基本语言(三)
  4. Android Studio 突然出现很多红色波浪线或红色感叹号解决方案
  5. python 系统学习笔记(十二)---os os.path os.walk
  6. H264 CAVLC 研究
  7. Docker 制作镜像的方式
  8. 【noip模拟赛4】Matrix67的派对 暴力dfs
  9. P3966 [TJOI2013]单词
  10. AOP原理解析及Castle、Autofac、Unity框架使用