纯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 日期对象Date扩展方法
May 30 Javascript
浅谈javascript中createElement事件
Dec 05 Javascript
jQuery实时显示鼠标指针位置和键盘ASCII码
Mar 28 Javascript
JavaScript中的数组遍历forEach()与map()方法以及兼容写法介绍
May 19 Javascript
利用bootstrapValidator验证UEditor
Sep 14 Javascript
详解webpack 多页面/入口支持&amp;公共组件单独打包
Jun 29 Javascript
微信小程序动态增加按钮组件
Sep 14 Javascript
JavaScript实现背景自动切换小案例
Sep 27 Javascript
微信小程序实现简单的select下拉框
Nov 23 Javascript
vue实现树状表格效果
Dec 29 Vue.js
JS addEventListener()和attachEvent()方法实现注册事件
Jan 11 Javascript
解读Vue组件注册方式
May 15 Vue.js
详解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
多重?l件?合查?(二)
2006/10/09 PHP
PHP实现数据库统计时间戳按天分组输出数据的方法
2017/10/10 PHP
用jquery来定位
2007/02/20 Javascript
给Javascript数组插入一条记录的代码
2007/08/30 Javascript
javascript 限制输入脚本大全
2009/11/03 Javascript
自己动手开发jQuery插件教程
2011/08/25 Javascript
js常用代码段整理
2011/11/30 Javascript
jquery使用ajax实现微信自动回复插件
2014/04/28 Javascript
浅谈jQuery中 wrap() wrapAll() 与 wrapInner()的差异
2014/11/12 Javascript
jQuery元素选择器用法实例
2014/12/23 Javascript
Javascript函数式编程简单介绍
2015/10/11 Javascript
jQuery绑定事件的四种方式介绍
2016/10/31 Javascript
js实现表单提交后不重新刷新当前页面
2016/11/30 Javascript
JavaScript中英文字符长度统计方法示例【按照中文占2个字符】
2017/01/17 Javascript
js实现滑动到页面底部自动加载更多功能
2017/02/15 Javascript
Node.js开发第三方微信公众平台
2017/06/05 Javascript
微信小程序swiper组件用法实例分析【附源码下载】
2017/12/07 Javascript
vue 的keep-alive缓存功能的实现
2018/03/22 Javascript
浅谈vue项目如何打包扔向服务器
2018/05/08 Javascript
在vue中使用echars实现上浮与下钻效果
2019/11/08 Javascript
原生jQuery实现只显示年份下拉框
2020/12/24 jQuery
[01:46]DOTA2上海特锦赛小组赛英文解说KotlGuy采访
2016/02/27 DOTA
[01:33]PWL开团时刻DAY2-开雾与反开雾
2020/10/31 DOTA
Django框架下在视图中使用模版的方法
2015/07/16 Python
Python+django实现文件上传
2016/01/17 Python
分享6个隐藏的python功能
2017/12/07 Python
python中时间转换datetime和pd.to_datetime详析
2019/08/11 Python
解决Tensorboard可视化错误:不显示数据 No scalar data was found
2020/02/15 Python
html5 横向滑动导航栏的方法示例
2020/05/08 HTML / CSS
机电一体化专业应届本科生求职信
2013/09/27 职场文书
酒吧创业计划书
2014/01/18 职场文书
《商鞅南门立木》教学反思
2014/02/16 职场文书
关于雷锋的演讲稿
2014/05/10 职场文书
房产销售独家委托书范本
2014/10/01 职场文书
解决Python字典查找报Keyerror的问题
2021/05/26 Python
关于springboot 配置date字段返回时间戳的问题
2021/07/25 Java/Android