纯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 相关文章推荐
json格式的时间显示为正常年月日的方法
Sep 08 Javascript
js获取或设置当前窗口url参数的小例子
Oct 14 Javascript
javascript创建createXmlHttpRequest对象示例代码
Feb 10 Javascript
js实现仿网易点击弹出提示同时背景变暗效果
Aug 13 Javascript
一个php+js实时显示时间问题
Oct 12 Javascript
jQuery文件上传控件 Uploadify 详解
Jun 20 Javascript
一道优雅面试题分析js中fn()和return fn()的区别
Jul 05 Javascript
JavaScript仿百度图片浏览效果
Nov 23 Javascript
react native与webview通信的示例代码
Sep 25 Javascript
使用selenium抓取淘宝的商品信息实例
Feb 06 Javascript
webpack下实现动态引入文件方法
Feb 22 Javascript
vue子传父关于.sync与$emit的实现
Nov 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使用递归计算文件夹大小
2014/12/24 PHP
php获取文章内容第一张图片的方法示例
2017/07/03 PHP
番茄的表单验证类代码修改版
2008/07/18 Javascript
flexigrid 参数说明
2010/11/23 Javascript
js实现一个省市区三级联动选择框代码分享
2013/03/06 Javascript
判断在css加载完毕后执行后续代码示例
2014/09/03 Javascript
Javascript 完美运动框架(逐行分析代码,让你轻松了运动的原理)
2015/01/23 Javascript
基于AngularJS前端云组件最佳实践
2016/10/20 Javascript
JavaScript实现的选择排序算法实例分析
2017/04/14 Javascript
JS库中的Particles.js在vue上的运用案例分析
2017/09/13 Javascript
详解axios 全攻略之基本介绍与使用(GET 与 POST)
2017/09/15 Javascript
jQueryMobile之窗体长内容的缺陷与解决方法实例分析
2017/09/20 jQuery
vue+vuecli+webpack中使用mockjs模拟后端数据的示例
2017/10/24 Javascript
webpack4 + react 搭建多页面应用示例
2018/08/03 Javascript
create-react-app安装出错问题解决方法
2018/09/04 Javascript
如何使用 vue-cli 创建模板项目
2020/11/19 Vue.js
[39:11]DOTA2上海特级锦标赛C组资格赛#2 LGD VS Newbee第二局
2016/02/28 DOTA
Python的高级Git库 Gittle
2014/09/22 Python
Python Property属性的2种用法
2015/06/21 Python
python文件的md5加密方法
2016/04/06 Python
python利用sklearn包编写决策树源代码
2017/12/21 Python
python使用pycharm环境调用opencv库
2018/02/11 Python
应用OpenCV和Python进行SIFT算法的实现详解
2019/08/21 Python
Python for循环及基础用法详解
2019/11/08 Python
详细分析Python collections工具库
2020/07/16 Python
如何用用Python将地址标记在地图上
2021/02/07 Python
世界上最好的帽子:Tilley
2016/11/27 全球购物
伯利陶器:Burleigh Pottery
2018/01/03 全球购物
六五普法规划实施方案
2014/03/21 职场文书
低碳环保倡议书
2014/04/14 职场文书
2014老师三严三实对照检查材料思想汇报
2014/09/18 职场文书
2014年应急工作总结
2014/12/11 职场文书
工作年限证明范本
2015/06/15 职场文书
七年级思品教学反思
2016/02/20 职场文书
Python常用配置文件ini、json、yaml读写总结
2021/07/09 Python
Go语言基础map用法及示例详解
2021/11/17 Golang