纯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效率个人经验谈(8-15更新),加入range技巧
Jan 09 Javascript
javascript在事件监听方面的兼容性小结
Apr 07 Javascript
jquery中ajax学习笔记4
Oct 16 Javascript
JS和jQuery使用submit方法无法提交表单的原因分析及解决办法
May 17 Javascript
AngularJS基础 ng-mouseleave 指令详解
Aug 02 Javascript
Three.js快速入门教程
Sep 09 Javascript
AngularJS ng-repeat指令中使用track by子语句解决重复数据遍历错误问题
Jan 21 Javascript
JS实现本地存储信息的方法(基于localStorage与userData)
Feb 18 Javascript
基于Vue2.X的路由和钩子函数详解
Feb 09 Javascript
在Vue组件中使用 TypeScript的方法
Feb 28 Javascript
微信小程序发送短信验证码完整实例
Jan 07 Javascript
Vue框架下引入ActiveX控件的问题解决
Mar 25 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
基于mysql的论坛(3)
2006/10/09 PHP
php中函数前加&amp;符号的作用分解
2014/07/08 PHP
yii实现创建验证码实例解析
2014/07/31 PHP
php创建无限级树型菜单
2015/11/05 PHP
调试Node.JS的辅助工具(NodeWatcher)
2012/01/04 Javascript
JS控制阿拉伯数字转为中文大写示例代码
2013/09/04 Javascript
JavaScript加强之自定义callback示例
2013/09/21 Javascript
js Object2String方便查看js对象内容
2014/11/24 Javascript
基于JavaScript实现移动端点击图片查看大图点击大图隐藏
2015/11/04 Javascript
阿里云ecs服务器中安装部署node.js的步骤
2016/10/08 Javascript
JS实现向iframe中表单传值的方法
2017/03/24 Javascript
nodejs实现简单的gulp打包
2017/12/21 NodeJs
vue-cli 3.x 修改dist路径的方法
2018/09/19 Javascript
JavaScript对象原型链原理详解
2020/02/05 Javascript
JavaScript中的函数式编程详解
2020/08/22 Javascript
nodejs+express最简易的连接数据库的方法
2020/12/23 NodeJs
使用简单工厂模式来进行Python的设计模式编程
2016/03/01 Python
在Python中定义和使用抽象类的方法
2016/06/30 Python
利用python实现简单的循环购物车功能示例代码
2017/07/05 Python
树莓派使用USB摄像头和motion实现监控
2019/06/22 Python
将Python文件打包成.EXE可执行文件的方法
2019/08/11 Python
Python稀疏矩阵及参数保存代码实现
2020/04/18 Python
如何利用python发送邮件
2020/09/26 Python
英国领先的豪华时尚家居网上商店:Amara
2019/08/12 全球购物
营业员个人总结的自我评价
2013/10/25 职场文书
区域总监的岗位职责
2013/11/21 职场文书
优秀团员个人事迹材料
2014/01/29 职场文书
2014年科协工作总结
2014/12/09 职场文书
我的生日感言
2015/08/03 职场文书
安全教育培训心得体会
2016/01/15 职场文书
2019年世界儿童日宣传标语
2019/11/22 职场文书
深入理解python协程
2021/06/15 Python
Mongodb 迁移数据块的流程介绍分析
2022/04/18 MongoDB
讲解MySQL增删改操作
2022/05/06 MySQL
排查Tomcat进程假死的问题
2022/05/06 Servers
Python+Pillow+Pytesseract实现验证码识别
2022/05/11 Python