纯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 相关文章推荐
use jscript List Installed Software
Jun 11 Javascript
javascript 最常用的10个自定义函数[推荐]
Dec 26 Javascript
检测input每次的输入是否合法遇到汉字输入就有问题
May 23 Javascript
js实现无需数据库的县级以上联动行政区域下拉控件
Aug 14 Javascript
JavaScript中判断原生函数检查function是否是原生代码
Sep 09 Javascript
用jmSlip编写移动端顶部日历选择控件
Oct 24 Javascript
Vue 全家桶实现移动端酷狗音乐功能
Nov 16 Javascript
从vue源码看props的用法
Jan 09 Javascript
解决mui框架中switch开关通过js控制开或者关状态时小圆点不动的问题
Sep 03 Javascript
详解vue中$nextTick和$forceUpdate的用法
Dec 11 Javascript
JS call()及apply()方法使用实例汇总
Jul 11 Javascript
vue自动添加浏览器兼容前后缀操作
Aug 13 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模块 Memcached功能多于Memcache
2011/06/14 PHP
php程序的国际化实现方法(利用gettext)
2011/08/14 PHP
PHP中extract()函数的妙用分析
2012/07/11 PHP
windows下apache搭建php开发环境
2015/08/27 PHP
php数据库的增删改查 php与javascript之间的交互
2017/08/31 PHP
PHP设计模式之简单工厂和工厂模式实例分析
2019/03/25 PHP
ThinkPHP3.2.3框架邮件发送功能图文实例详解
2019/04/23 PHP
JavaScript入门教程(7) History历史对象
2009/01/31 Javascript
javascript 图片上传预览-兼容标准
2009/06/01 Javascript
JS随机漂浮广告代码具体实例
2013/11/19 Javascript
在JavaScript中处理数组之reverse()方法的使用
2015/06/09 Javascript
javascript-解决mongoose数据查询的异步操作
2016/12/22 Javascript
Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解
2017/08/01 jQuery
基于webpack.config.js 参数详解
2018/03/20 Javascript
node结合swig渲染摸板的方法
2018/04/11 Javascript
Bootstrap导航菜单点击后无法自动添加active的处理方法
2018/08/10 Javascript
JS实现滑动拼图验证功能完整示例
2020/03/29 Javascript
vuex中遇到的坑,vuex数据改变,组件中页面不渲染操作
2020/11/16 Javascript
[08:06]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant 选手采访
2021/03/11 DOTA
用python分割TXT文件成4K的TXT文件
2009/05/23 Python
跟老齐学Python之正规地说一句话
2014/09/28 Python
使用python模拟命令行终端的示例
2019/08/13 Python
Python实现bilibili时间长度查询的示例代码
2020/01/14 Python
PyCharm最新激活码(2020/10/27全网最新)
2020/10/27 Python
python爬取豆瓣电影排行榜(requests)的示例代码
2021/02/18 Python
美国领先的汽车轮胎和轮毂供应商:TireBuyer
2016/07/21 全球购物
香港时装购物网站:ZALORA香港
2017/04/23 全球购物
行政总监岗位职责
2013/12/05 职场文书
检查接待方案
2014/02/27 职场文书
酒店员工培训方案
2014/06/02 职场文书
借款协议书
2014/09/16 职场文书
中国梦党课学习心得体会
2016/01/05 职场文书
Canvas三种动态画圆实现方法说明(小结)
2021/04/16 Javascript
Python基础之常用库常用方法整理
2021/04/30 Python
浅谈PostgreSQL表分区的三种方式
2021/06/29 PostgreSQL
mysql主从复制的实现步骤
2021/10/24 MySQL