我是靠谱客的博主 敏感电灯胆,最近开发中收集的这篇文章主要介绍《JavaScript学习笔记》:只能输入数字的文本框《JavaScript学习笔记》:只能输入数字的文本框,觉得挺不错的,现在分享给大家,希望可以做个参考。

概述

《JavaScript学习笔记》:只能输入数字的文本框

这主要涉及到一个键盘事件(onkeydown)和一个键码值的范围。

由于数字0~9所对应的键码为48~57,因此,我们只需要将48~57范围之外的键阻止掉就可以了。

假设我们有一个文本框,id为txt1,则如下的代码就实现了只允许数字输入。

    <script>
    window.onload=function()
    {
        var oTxt = document.getElementById('txt1');
        oTxt.value='';
        oTxt.onkeydown=function(ev)
        {
            var oEvent = ev||event;
            //alert(oEvent.keyCode);
            //除了数字,全部给阻止了,也包括删除键BackSpace
            if(oEvent.keyCode<48||oEvent.keyCode>57)
            {
                return false;//阻止输入
            }       

        };

    };
    </script>

但是,上面的代码有一点点bug,在文本输入框,用户会输错肯定是常用的是,我们不能不允许它按回退键删除,是吧,因此上面的程序我们还需要修正。

由于回退键的keycode=8.(如果不知道键码,可使用alert(oEvent.keyCode)来获取)。

一般我们的回车键enter用来给用户提交它所输入的信息,因此我们也需要保留出来,即允许用户输入回车键。

因此,代码如下:

    <script>
    window.onload=function()
    {
        var oTxt = document.getElementById('txt1');
        oTxt.value='';
        oTxt.onkeydown=function(ev)
        {
            var oEvent = ev||event;
            //alert(oEvent.keyCode);
            /*
            由于对于输入框,删除键BK(keyCode为13)我们是需要的,回车键(keyCode为13)我们也是需要的,因此我们不能阻止掉
            */
            if((oEvent.keyCode<48||oEvent.keyCode>57)&& oEvent.keyCode!=8&&oEvent.keyCode!=13)
            {
                return false;//阻止输入
            }   


        };

    };
    </script>

以上,就是关于js中只能输入数字的文本框的实现。

只能输入数字,我们还可以使用正则表达式来实现。

最后

以上就是敏感电灯胆为你收集整理的《JavaScript学习笔记》:只能输入数字的文本框《JavaScript学习笔记》:只能输入数字的文本框的全部内容,希望文章能够帮你解决《JavaScript学习笔记》:只能输入数字的文本框《JavaScript学习笔记》:只能输入数字的文本框所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(44)

评论列表共有 0 条评论

立即
投稿
返回
顶部