纯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 相关文章推荐
JQuery获取文本框中字符长度的代码
Sep 29 Javascript
javascript实现的弹出层背景置灰-模拟(easyui dialog)
Dec 27 Javascript
一段非常简单的js判断浏览器的内核
Aug 17 Javascript
超精准的javascript验证身份证号的具体实现方法
Nov 18 Javascript
一系列Bootstrap导航条使用方法分享
Apr 29 Javascript
使用vue2实现购物车和地址选配功能
Mar 29 Javascript
微信小程序有旋转动画效果的音乐组件实例代码
Aug 22 Javascript
js中数组常用方法总结(推荐)
Apr 09 Javascript
详解es6新增数组方法简便了哪些操作
May 09 Javascript
JS实现随机点名器
Apr 12 Javascript
一文带你理解vue创建一个后台管理系统流程(Vue+Element)
May 18 Vue.js
利用uni-app生成微信小程序的踩坑记录
Apr 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/11/29 PHP
php字符串函数学习之strstr()
2015/03/27 PHP
可兼容php5与php7的cURL文件上传功能实例分析
2018/05/11 PHP
DOM 基本方法
2009/07/18 Javascript
JS面向对象编程之对象使用分析
2010/08/19 Javascript
JavaScript中this的使用详解
2013/11/08 Javascript
动态加载dtree.js树treeview(示例代码)
2013/12/17 Javascript
如何设置一定时间内只能发送一次请求
2014/02/28 Javascript
js实现简单的购物车有图有代码
2014/05/26 Javascript
jQuery实现流动虚线框的方法
2015/01/29 Javascript
ES6新特性五:Set与Map的数据结构实例分析
2017/04/21 Javascript
防止页面url缓存中ajax中post请求的处理方法
2017/10/10 Javascript
原生JS上传大文件显示进度条 php上传文件代码
2020/03/27 Javascript
使用jQuery如何写一个含验证码的登录界面
2019/05/13 jQuery
解决layer 关闭当前弹窗 关闭遮罩层 input值获取不到的问题
2019/09/25 Javascript
layui 上传图片 返回图片地址的方法
2019/09/26 Javascript
原理深度解析Vue的响应式更新比React快
2020/04/04 Javascript
Node.js API详解之 timer模块用法实例分析
2020/05/07 Javascript
Javascript原型链及instanceof原理详解
2020/05/25 Javascript
js实现时间日期校验
2020/05/26 Javascript
python生成随机mac地址的方法
2015/03/16 Python
python中实现指定时间调用函数示例代码
2017/09/08 Python
tornado 多进程模式解析
2018/01/15 Python
python计算列表内各元素的个数实例
2018/06/29 Python
Python 实现交换矩阵的行示例
2019/06/26 Python
Python连接mysql数据库及简单增删改查操作示例代码
2020/08/03 Python
html5的画布canvas——画出简单的矩形、三角形实例代码
2013/06/09 HTML / CSS
美国运动鞋和运动服零售商:Footaction
2017/04/07 全球购物
美国女士内衣在线折扣商店:One Hanes Place
2019/03/24 全球购物
信息管理员岗位职责
2013/12/01 职场文书
蔬菜基地的创业计划书
2014/01/06 职场文书
工作检讨书怎么写
2015/01/23 职场文书
2015毕业实习推荐信
2015/03/23 职场文书
《百分数的认识》教学反思
2016/02/19 职场文书
Python实现查询剪贴板自动匹配信息的思路详解
2021/07/09 Python
Sleuth+logback 设置traceid 及自定义信息方式
2021/07/26 Java/Android