纯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 相关文章推荐
js版本A*寻路算法
Dec 22 Javascript
jquery表单验证使用插件formValidator
Nov 10 Javascript
让复选框只能选择一项的方法
Oct 08 Javascript
jQuery中多个元素的Hover事件解决方案
Jun 12 Javascript
javascript刷新父页面的各种方法汇总
Sep 03 Javascript
JavaScript 异常处理 详解
Feb 06 Javascript
js实现鼠标经过表格行变色的方法
May 12 Javascript
手机端转换rem适应
Apr 01 Javascript
深入理解Angularjs 脏值检测
Oct 12 Javascript
vue实现路由不变的情况下,刷新页面操作示例
Feb 02 Javascript
JavaScript交换变量的常用方法小结【4种方法】
May 07 Javascript
electron踩坑之dialog中的callback解决
Oct 06 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
珊瑚虫IP库浅析
2007/02/15 PHP
coreseek 搜索英文的问题详解
2013/06/08 PHP
ThinkPHP、ZF2、Yaf、Laravel框架路由大比拼
2015/03/25 PHP
用脚本调用样式的几种方法
2006/12/09 Javascript
不要在cookie中使用特殊字符的原因分析
2010/07/13 Javascript
JS JSON对象转为字符串的简单实现方法
2013/11/18 Javascript
jQuery ajax分页插件实例代码
2016/01/27 Javascript
jQuery实现最简单的切换图效果【可兼容IE6、火狐、谷歌、opera等】
2016/09/04 Javascript
jQuery联动日历的实例解析
2016/12/02 Javascript
移动端点击态处理的三种实现方式
2017/01/12 Javascript
JS实现二叉查找树的建立以及一些遍历方法实现
2017/04/17 Javascript
node.js平台下利用cookie实现记住密码登陆(Express+Ejs+Mysql)
2017/04/26 Javascript
详解vue.js的事件处理器v-on:click
2017/06/27 Javascript
node+koa2+mysql+bootstrap搭建一个前端论坛
2018/05/06 Javascript
vue+element-ui集成随机验证码+用户名+密码的form表单验证功能
2018/08/05 Javascript
JS 音频可视化插件Wavesurfer.js的使用教程
2018/10/31 Javascript
Node.js + express实现上传大文件的方法分析【图片、文本文件】
2019/03/14 Javascript
使用layer模态框给新页面传值的方法
2019/09/27 Javascript
Vue执行方法,方法获取data值,设置data值,方法传值操作
2020/08/05 Javascript
Python提示[Errno 32]Broken pipe导致线程crash错误解决方法
2014/11/19 Python
在Python的Flask框架中构建Web表单的教程
2016/06/04 Python
通过python将大量文件按修改时间分类的方法
2018/10/17 Python
Django 日志配置按日期滚动的方法
2019/01/31 Python
Python生成rsa密钥对操作示例
2019/04/26 Python
HTML5标签大全
2016/11/23 HTML / CSS
美国学校校服,儿童和婴儿服装:Cookie’s Kids
2016/10/14 全球购物
一份软件工程师的面试试题
2016/02/01 面试题
电气专业应届生求职信
2013/11/01 职场文书
大学生职业生涯规划书前言
2014/01/09 职场文书
岗位职责风险防控
2014/02/18 职场文书
硕士研究生求职自荐信范文
2014/03/11 职场文书
党员活动日总结
2014/05/05 职场文书
2014教师党员个人自我评议
2014/09/20 职场文书
Win10系统下配置Java环境变量
2021/06/13 Java/Android
经典《舰娘》游改全新动画预告 预定11月开播
2022/04/01 日漫
如何更改Win11声音输出设备?Win11声音输出设备四种更改方法
2022/04/08 数码科技