纯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 相关文章推荐
JavaScript在IE和Firefox(火狐)的不兼容问题解决方法小结
Apr 13 Javascript
基于JS代码实现实时显示系统时间
Jun 16 Javascript
JavaScript DOM节点操作方法总结
Aug 23 Javascript
jQuery实现动态删除LI的方法
May 30 jQuery
Angularjs使用过滤器完成排序功能
Sep 20 Javascript
javaScript和jQuery自动加载简单代码实现方法
Nov 24 jQuery
vue axios请求超时的正确处理方法
Apr 02 Javascript
vue中实现上传文件给后台实例详解
Aug 22 Javascript
javascript canvas时钟模拟器
Jul 13 Javascript
Flexible.js可伸缩布局实现方法详解
Nov 13 Javascript
详解js创建对象的几种方式和对象方法
Mar 01 Javascript
详解TS数字分隔符和更严格的类属性检查
May 06 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中实现记住密码下次自动登录的例子
2014/11/06 PHP
PHP实现HTML页面静态化的方法
2015/11/04 PHP
PHP微信开发之文本自动回复
2016/06/23 PHP
php实现算术验证码功能
2018/12/05 PHP
laravel 事件/监听器实例代码
2019/04/12 PHP
纯CSS3实现质感细腻丝滑按钮
2021/03/09 HTML / CSS
在线编辑器的实现原理(兼容IE和FireFox)
2007/03/09 Javascript
Jquery+CSS3实现一款简洁大气带滑动效果的弹出层
2013/05/15 Javascript
页面实时更新时间的JS实例代码
2013/12/18 Javascript
jquery实现鼠标滑过显示提示框的方法
2015/02/05 Javascript
jQuery幻灯片插件owlcarousel参数说明中文文档
2018/02/27 jQuery
javascript和php使用ajax通信传递JSON的实例
2018/08/21 Javascript
原生JS实现的跳一跳小游戏完整实例
2019/01/27 Javascript
jQuery提示框插件SweetAlert用法分析
2019/08/05 jQuery
Vuex,iView UI面包屑导航使用扩展详解
2019/11/04 Javascript
使用Vue实现简单计算器
2020/02/25 Javascript
解决Antd 里面的select 选择框联动触发的问题
2020/10/24 Javascript
[06:07]刀塔密之二:攻之吾命受之吾幸
2014/07/03 DOTA
[03:40]2014DOTA2国际邀请赛 B神专访:躲箭真的很难
2014/07/13 DOTA
Python单元测试框架unittest简明使用实例
2015/04/13 Python
Pycharm导入Python包,模块的图文教程
2018/06/13 Python
Python面向对象类的继承实例详解
2018/06/27 Python
python实现石头剪刀布小游戏
2021/01/20 Python
Python中list的交、并、差集获取方法示例
2019/08/01 Python
如何理解python中数字列表
2020/05/29 Python
使用Pytorch搭建模型的步骤
2020/11/16 Python
css3加js做一个简单的3D行星运转效果实例代码
2017/01/18 HTML / CSS
实习生自我鉴定范文
2013/12/05 职场文书
教导主任竞聘演讲稿
2014/05/16 职场文书
物理学专业求职信
2014/07/04 职场文书
学习十八届四中全会精神思想汇报
2014/10/23 职场文书
Redis Stream类型的使用详解
2021/11/11 Redis
Redis中有序集合的内部实现方式的详细介绍
2022/03/16 Redis
Win11电脑显示本地时间与服务器时间不一致怎么解决?
2022/04/05 数码科技
Win11 Dev 预览版25174.1000发布 (附更新修复内容汇总)
2022/08/05 数码科技
canvas 中如何实现物体的框选
2022/08/05 Javascript