纯JS实现只能输入数字的简单代码


Posted in Javascript onJune 21, 2017

只能输入数字

<!DOCTYPE html>
<html lang="en">
  <head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="css/style.css" rel="external nofollow" rel="stylesheet">
  </head>
  <script>
    addEvent(window,'load',function(){
      var fm = document.getElementById('myForm'); //使用ID获取<form>元素
      var content = fm.elements['content'];
      //只能输入数字
      addEvent(content,'keypress',function(evt){
        var e = evt || window.event;
        var charCode = getCharCode(evt);
        // alert(charCode); 获取按键编码
        //正则表达式来获取文本是否为数字
        if(!/\d/.test(String.fromCharCode(charCode)) && charCode > 8){
          preDef(evt);  //屏蔽掉非数字键盘的输入
        }
      });
      //只能输入数字 验证数据非法后取消输入
      addEvent(content,'keyup',function(evt){
        this.value = this.value.replace(/[^\d]/g,'');  //非数字键转换为空
      });
    });
    // 所需要的封装函数
    //跨浏览器添加事件
    function addEvent(obj,type,fn){
      if(obj.addEventListener){
        obj.addEventListener(type,fn,false);
      }else if(obj.attachEvent){
        obj.attachEvent('on' + type,function(){
          fn.call(obj);
        });
      }
    }
  </script>
  <body>
    <form id="myForm" name="yourForm">
      <textarea name="content">textarea</textarea>
    </form>
  </body>
</html>

以上所述是小编给大家介绍的纯JS实现只能输入数字的简单代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
自己的js工具_Form 封装
Aug 21 Javascript
兼容Firefox的Javascript XSLT 处理XML文件
Dec 31 Javascript
浅谈JavaScript中的string拥有方法的原因
Aug 28 Javascript
完美实现bootstrap分页查询
Dec 09 Javascript
学习JavaScript设计模式之装饰者模式
Jan 19 Javascript
jQuery实现的文字hover颜色渐变效果实例
Feb 20 Javascript
基于javascript实现九宫格大转盘效果
May 28 Javascript
jquery实现左右无缝轮播图
Jul 31 Javascript
深入理解jquery自定义动画animate()
May 24 Javascript
js实现瀑布流效果(自动生成新的内容)
Mar 16 Javascript
webuploader分片上传的实现代码(前后端分离)
Sep 10 Javascript
JS块级作用域和私有变量实例分析
May 11 Javascript
详解ElementUI之表单验证、数据绑定、路由跳转
Jun 21 #Javascript
Vue实现百度下拉提示搜索功能
Jun 21 #Javascript
vue2.0中click点击当前li实现动态切换class
Jun 21 #Javascript
jQuery实现可拖动进度条实例代码
Jun 21 #jQuery
详解Vue整合axios的实例代码
Jun 21 #Javascript
详解在vue-cli项目中安装node-sass
Jun 21 #Javascript
详解vue-cli中配置sass
Jun 21 #Javascript
You might like
PHP生成唯一的促销/优惠/折扣码(附源码)
2012/12/28 PHP
php实现的Cookies操作类实例
2014/09/24 PHP
PHP批量修改文件名称的方法分析
2017/02/27 PHP
php使用lua+redis实现限流,计数器模式,令牌桶模式
2019/04/04 PHP
php swoole多进程/多线程用法示例【基于php7nts版】
2019/08/12 PHP
JavaScript关于select的相关操作说明
2010/01/13 Javascript
javaScript call 函数的用法说明
2010/04/09 Javascript
JS实现字体选色板实例代码
2013/11/20 Javascript
js中arguments的用法(实例讲解)
2013/11/30 Javascript
jquery获取元素索引值index()示例
2014/02/13 Javascript
Javascript实现跑马灯效果的简单实例
2016/05/31 Javascript
JavaScript手机振动API
2016/06/11 Javascript
js获取ip和地区
2017/03/10 Javascript
webpack-dev-server远程访问配置方法
2018/02/22 Javascript
如何使用three.js 制作一个三维的推箱子游戏
2020/07/29 Javascript
antd Form组件方法getFieldsValue获取自定义组件的值操作
2020/10/29 Javascript
详解阿里Node.js技术文档之process模块学习指南
2021/01/04 Javascript
Python 的 Socket 编程
2015/03/24 Python
实例讲解Python的函数闭包使用中应注意的问题
2016/06/20 Python
读写json中文ASCII乱码问题的解决方法
2016/11/05 Python
Python使用微信SDK实现的微信支付功能示例
2017/06/30 Python
python excel使用xlutils类库实现追加写功能的方法
2018/05/02 Python
详解pandas删除缺失数据(pd.dropna()方法)
2019/06/25 Python
python批量处理txt文件的实例代码
2020/01/13 Python
开启Django博客的RSS功能的实现方法
2020/02/17 Python
Pytorch环境搭建与基本语法
2020/06/03 Python
英国玛莎百货美国官网:Marks & Spencer美国
2018/11/06 全球购物
美国名表在线商城:Ashford(支持中文)
2019/09/24 全球购物
LINUX下线程,GDI类的解释
2016/12/14 面试题
应届生法律顾问求职信
2013/11/19 职场文书
模具数控专业自荐信
2014/01/27 职场文书
硕士生工作推荐信
2014/03/07 职场文书
网络营销计划
2015/01/17 职场文书
月考总结与反思
2015/10/22 职场文书
学习杨善洲同志先进事迹心得体会
2016/01/23 职场文书
八年级作文之感悟亲情
2019/11/20 职场文书