纯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 支持链式调用的异步调用框架Async.Operation
Aug 04 Javascript
JS打开图片另存为对话框实现代码
Dec 26 Javascript
jquery实现简单易懂的图片展示小例子
Nov 21 Javascript
JQuery为页面Dom元素绑定事件及解除绑定方法
Apr 23 Javascript
1秒50万字!js实现关键词匹配
Aug 01 Javascript
easyUI combobox实现联动效果
Jan 17 Javascript
原生js实现鼠标跟随效果
Feb 28 Javascript
ES6学习教程之对象的扩展详解
May 02 Javascript
Vue服务器渲染Nuxt学习笔记
Jan 31 Javascript
Vue实现active点击切换方法
Mar 16 Javascript
小程序实现列表多个批量倒计时
Jan 29 Javascript
JS浅拷贝和深拷贝原理与实现方法分析
Feb 28 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
给apache2.2加上mod_encoding模块後 php5.2.0 处理url出现bug
2007/04/12 PHP
正确的PHP匹配UTF-8中文的正则表达式
2015/05/13 PHP
javascript dom 操作详解 js加强
2009/07/13 Javascript
JavaScript 事件记录使用说明
2009/10/20 Javascript
js 未结束的字符串常量错误解决方法
2010/06/13 Javascript
使用typeof判断function是否存在于上下文
2014/08/14 Javascript
javascript获取文档坐标和视口坐标
2015/05/26 Javascript
JavaScript实现两个select下拉框选项左移右移
2017/03/09 Javascript
js实现登录与注册界面
2017/11/01 Javascript
详解Vue Elememt-UI构建管理后台
2018/02/27 Javascript
webstorm中配置nodejs环境及npm的实例
2018/05/15 NodeJs
详解vue-cli下ESlint 配置说明
2018/09/03 Javascript
在Vue组件中获取全局的点击事件方法
2018/09/06 Javascript
基于Vue实现平滑过渡的拖拽排序功能
2019/06/12 Javascript
一文看懂如何简单实现节流函数和防抖函数
2019/09/05 Javascript
vue基于better-scroll仿京东分类列表
2020/06/30 Javascript
Jquery+javascript实现支付网页数字键盘
2020/12/21 jQuery
使用python的chardet库获得文件编码并修改编码
2014/01/22 Python
Python实现删除列表中满足一定条件的元素示例
2017/06/12 Python
python命令行解析之parse_known_args()函数和parse_args()使用区别介绍
2018/01/24 Python
Python实现的寻找前5个默尼森数算法示例
2018/03/25 Python
Python实现按当前日期(年、月、日)创建多级目录的方法
2018/04/26 Python
Python除法之传统除法、Floor除法及真除法实例详解
2019/05/23 Python
python实现的登录与提交表单数据功能示例
2019/09/25 Python
Django-imagekit的使用详解
2020/07/06 Python
美国知名运动产品零售商:Foot Locker
2016/07/23 全球购物
吉列剃须刀英国官网:Gillette英国
2019/03/28 全球购物
Molly Bracken法国电子商店:法国女性时尚品牌
2019/07/24 全球购物
应届生自我鉴定
2013/12/11 职场文书
高二学生评语大全
2014/04/25 职场文书
班级课外活动总结
2014/07/09 职场文书
离婚协议书样本
2015/01/26 职场文书
2015年度物流工作总结
2015/04/30 职场文书
公司员工离职感言
2015/08/03 职场文书
公司车辆管理制度
2015/08/04 职场文书
Django中session进行权限管理的使用
2021/07/09 Python