纯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 相关文章推荐
asp.net和asp下ACCESS的参数化查询
Jun 11 Javascript
网页右下角弹出窗体实现代码
Jun 05 Javascript
jQuery中removeClass()方法用法实例
Jan 05 Javascript
浅谈Jquery为元素绑定事件
Apr 27 Javascript
js实现无限级树形导航列表效果代码
Sep 23 Javascript
jquery插件jquery.confirm弹出确认消息
Dec 22 Javascript
使用jQuery操作HTML的table表格的实例解析
Mar 13 Javascript
JS中的eval 为什么加括号
Apr 13 Javascript
ExtJs的Ext.Ajax.request实现waitMsg等待提示效果
Jun 14 Javascript
详解Node项目部署到云服务器上
Jul 12 Javascript
使用store来优化React组件的方法
Oct 23 Javascript
vue 实现一个简单的全局调用弹窗案例
Sep 10 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将数据库中的电话号码读取出来并生成图片
2008/08/31 PHP
php操作mysql数据库的基本类代码
2014/02/25 PHP
php cookie工作原理与实例详解
2016/07/18 PHP
在IE,Firefox,Safari,Chrome,Opera浏览器上调试javascript
2008/12/02 Javascript
jQuery 常见学习网站与参考书
2009/11/09 Javascript
JQuery与iframe交互实现代码
2009/12/24 Javascript
javascript 弹出层组件(升级版)
2011/05/12 Javascript
jQuery中closest和parents的区别分析
2015/05/07 Javascript
JavaScript函数基础详解
2017/02/03 Javascript
Vue内容分发slot(全面解析)
2017/08/19 Javascript
JS实现匀加速与匀减速运动的方法示例
2017/09/04 Javascript
Three.js利用dat.GUI如何简化试验流程详解
2017/09/26 Javascript
vue组件(全局,局部,动态加载组件)
2018/09/02 Javascript
详解JavaScript中typeof与instanceof用法
2018/10/24 Javascript
微信小程序实现无限滚动列表
2020/05/29 Javascript
jQuery实现滑动星星评分效果(每日分享)
2019/11/13 jQuery
React组件设计模式之组合组件应用实例分析
2020/04/29 Javascript
微信小程序实现电子签名功能
2020/07/29 Javascript
Ajax获取node服务器数据的完整步骤
2020/09/20 Javascript
[06:23]2014DOTA2西雅图国际邀请赛 小组赛7月12日TOPPLAY
2014/07/12 DOTA
python中常用的各种数据库操作模块和连接实例
2014/05/29 Python
python3抓取中文网页的方法
2015/07/28 Python
python实现AES加密和解密
2019/03/27 Python
python爬取基于m3u8协议的ts文件并合并
2019/04/26 Python
Pytorch 使用 nii数据做输入数据的操作
2020/05/26 Python
使用keras实现BiLSTM+CNN+CRF文字标记NER
2020/06/29 Python
canvas绘制太极图的实现示例
2020/04/29 HTML / CSS
阿根廷在线宠物商店:Puppis
2018/03/23 全球购物
欧缇丽加拿大官方网站:Caudalie加拿大
2019/07/18 全球购物
应届生自荐信范文
2014/02/21 职场文书
挂牌仪式策划方案
2014/05/18 职场文书
幼儿园安全生产月活动总结
2014/07/05 职场文书
通知函格式范文
2015/04/27 职场文书
2015年网管个人工作总结
2015/05/22 职场文书
2015国庆66周年宣传语
2015/07/14 职场文书
使用CSS3实现按钮悬停闪烁动态特效代码
2021/08/30 HTML / CSS