只能输入数字的输入框（input）例子

最新推荐文章于 2024-02-29 11:49:15 发布

原创最新推荐文章于 2024-02-29 11:49:15 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#input #function

网站建设专栏收录该内容

740 篇文章

订阅专栏

本文介绍了一个简单的JavaScript函数，用于创建仅允许数字输入的文本框。该函数通过监听键盘事件来阻止非数字字符的输入，并支持退格、删除、Tab和方向键等操作。

代码：

/*
* zhanjh 2008.06.04
*/
function NumInput(){
    var input=document.createElement("input");
    input.type="text";
    var oThis=this;
    input.onkeydown=function(e){
        var keycode=(e)?e.which:event.keyCode;
        if(!oThis.isNumberKeyCode(keycode)){
            oThis.cancelEvent(e);
            return;
        }
    }
    return input
}
NumInput.prototype={
    /**
     * 取消事件
     */
    cancelEvent:function(e){
        if(e&&e.preventDefault){
            e.preventDefault();
            e.stopPropagation();
        }else{
            event.cancelBubble=true;
            event.returnValue=false;
        }
        return false;
    },
    /**
     * 判断是否是数字键
     */
    isNumberKeyCode:function(keycode){
        if(keycode>=48&&keycode<=57)
            return true;
        else if(keycode>=96&&keycode<=105)
            return true;
        else if(keycode==8||keycode==13||keycode==9||keycode==46)
            return true;
        else if(keycode<=40&&keycode>=37)
            return true;
        return false;
    }
}

使用：

function addNumInput(){

   var input=new NumInput();

    document.body.appendChild(input);

}