纯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 相关文章推荐
jQuery EasyUI API 中文文档 - Parser 解析器
Sep 29 Javascript
JavaScript解析URL参数示例代码
Aug 12 Javascript
js捕获鼠标滚轮事件代码
Dec 16 Javascript
jQuery中:eq()选择器用法实例
Dec 29 Javascript
javascript 用函数实现继承详解
May 28 Javascript
JS中使用FormData上传文件、图片的方法
Aug 07 Javascript
微信小程序-消息提示框实例
Nov 24 Javascript
jQuery模拟实现天猫购物车动画效果实例代码
May 25 jQuery
jQuery niceScroll滚动条错位问题的解决方法
Feb 03 jQuery
vue项目添加多页面配置的步骤详解
May 22 Javascript
怎么使用javascript深度拷贝一个数组
Jun 06 Javascript
JavaScript WeakMap使用详解
Feb 05 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用strstr()函数阻止垃圾评论(通过判断a标记)
2013/09/28 PHP
php的mail函数发送UTF-8编码中文邮件时标题乱码的解决办法
2015/10/20 PHP
php并发加锁示例
2016/10/17 PHP
PHPCrawl爬虫库实现抓取酷狗歌单的方法示例
2017/12/21 PHP
对google个性主页的拖拽效果的js的完整注释[转]
2007/04/10 Javascript
jsp+javascript打造级连菜单的实例代码
2013/06/14 Javascript
键盘上一张下一张兼容IE/google/firefox等浏览器
2014/01/28 Javascript
JS合并数组的几种方法及优劣比较
2014/09/19 Javascript
再谈javascript原型继承
2014/11/10 Javascript
jQuery插件kinMaxShow扩展效果用法实例
2015/05/04 Javascript
Node.js实现数据推送
2016/04/14 Javascript
老生常谈 js中this的指向
2016/06/30 Javascript
浅谈JavaScript的计时器对象
2016/12/26 Javascript
原生Javascript插件开发实践
2017/01/18 Javascript
JS组件系列之MVVM组件构建自己的Vue组件
2017/04/28 Javascript
js合并两个数组生成合并后的key:value数组
2018/05/09 Javascript
Js中使用正则表达式验证输入是否有特殊字符
2018/09/07 Javascript
React项目动态设置title标题的方法示例
2018/09/26 Javascript
详解vue几种主动刷新的方法总结
2019/02/19 Javascript
使用flow来规范javascript的变量类型
2019/09/12 Javascript
原生JS封装拖动验证滑块的实现代码示例
2020/06/01 Javascript
JS+CSS实现炫酷光感效果
2020/09/05 Javascript
详解ES6中class的实现原理
2020/10/03 Javascript
解决vue init webpack 下载依赖卡住不动的问题
2020/11/09 Javascript
Python Property属性的2种用法
2015/06/21 Python
Python全局锁中如何合理运用多线程(多进程)
2019/11/06 Python
python super()函数的基本使用
2020/09/10 Python
利用HTML5中的Canvas绘制一张笑脸的教程
2015/05/07 HTML / CSS
Html5跳转到APP指定页面的实现
2020/01/14 HTML / CSS
Vertbaudet西班牙网上商店:婴儿服装、童装、母婴用品和儿童家具
2019/10/16 全球购物
Ray-Ban雷朋太阳眼镜英国官网:Ray-Ban UK
2019/11/23 全球购物
教师自荐书
2013/10/08 职场文书
校本研修个人总结
2015/02/28 职场文书
严以用权学习心得体会
2016/01/12 职场文书
解决mysql的int型主键自增问题
2021/07/15 MySQL
pd.DataFrame中的几种索引变换的实现
2022/06/16 Python