纯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 相关文章推荐
在修改准备发的批量美化select+可修改select时,在非IE下发现了几个问题
Jan 09 Javascript
鼠标移到图片上变大显示而不是放大镜效果
Jun 15 Javascript
基于jquery实现鼠标滚轮驱动的图片切换效果
Oct 26 Javascript
AngularJS基础 ng-focus 指令简单示例
Aug 01 Javascript
JS获取字符串实际长度(包含汉字)的简单方法
Aug 11 Javascript
JS中使用media实现响应式布局
Aug 04 Javascript
vue+node+webpack环境搭建教程
Nov 05 Javascript
bmob js-sdk 在vue中的使用教程
Jan 21 Javascript
JavaScript引用类型Function实例详解
Aug 09 Javascript
详解Vue结合后台的列表增删改案例
Aug 21 Javascript
js计算两个日期间的天数月的实例代码
Sep 20 Javascript
如何在postman测试用例中实现断言过程解析
Jul 09 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学习笔记 用户注册模块用户类以及验证码类
2011/09/20 PHP
PHP flock 文件锁详细介绍
2012/12/29 PHP
PHP也能干大事 随机函数
2015/04/14 PHP
JS event使用方法详解
2008/04/28 Javascript
基于jquery实现的鼠标滑过按钮改变背景图片
2011/07/15 Javascript
jquery+ajax+C#实现无刷新操作数据库数据的简单实例
2014/02/08 Javascript
js实现键盘控制DIV移动的方法
2015/01/10 Javascript
javascript实现简单加载随机色方块
2015/12/25 Javascript
jQuery处理XML文件的几种方法
2016/06/14 Javascript
使用json来定义函数,在里面可以定义多个函数的实现方法
2016/10/28 Javascript
浅析jsopn跨域请求原理及cors(跨域资源共享)的完美解决方法
2017/02/06 Javascript
JavaScript验证知识整理
2017/03/24 Javascript
浅谈webpack下的AOP式无侵入注入
2017/11/12 Javascript
Vue.use源码学习小结
2018/06/20 Javascript
Angular6 正则表达式允许输入部分中文字符
2018/09/10 Javascript
详解关于Vue版本不匹配问题(Vue packages version mismatch)
2018/09/17 Javascript
Vue slot用法(小结)
2018/10/22 Javascript
js实现手表表盘时钟与圆周运动
2020/09/18 Javascript
浅析Python中的join()方法的使用
2015/05/19 Python
Python中文竖排显示的方法
2015/07/28 Python
python爬取基于m3u8协议的ts文件并合并
2019/04/26 Python
Pandas之DataFrame对象的列和索引之间的转化
2019/06/25 Python
Python Django 封装分页成通用的模块详解
2019/08/21 Python
python NumPy ndarray二维数组 按照行列求平均实例
2019/11/26 Python
如何使用python代码操作git代码
2020/02/29 Python
通过Python扫描代码关键字并进行预警的实现方法
2020/05/24 Python
纯css3实现的鼠标悬停动画按钮
2014/12/23 HTML / CSS
Easy Spirit官网:美国休闲鞋履中的代表品牌
2019/04/12 全球购物
不假外出检讨书
2014/01/27 职场文书
小学一年级评语大全
2014/04/22 职场文书
庆七一活动总结
2014/08/27 职场文书
家庭教育的心得体会
2014/09/01 职场文书
买房协议书范本
2014/10/23 职场文书
实施意见格式范本
2015/06/05 职场文书
2016年过年放假安排通知
2015/08/18 职场文书
Python语言内置数据类型
2022/02/24 Python