纯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入门知识简介
Mar 04 Javascript
button没写type=button会导致点击时提交
Mar 06 Javascript
利用javascript实现全部删或清空所选的操作
May 27 Javascript
基于Jquery和html5的7款个性化地图插件
Nov 17 Javascript
深入理解jQuery 事件处理
Jun 14 Javascript
angularjs 实现带查找筛选功能的select下拉框实例
Jan 11 Javascript
深入浅析JavaScript中的RegExp对象
Sep 18 Javascript
javaScript日期工具类DateUtils详解
Dec 08 Javascript
vue中添加mp3音频文件的方法
Mar 02 Javascript
vue通过滚动行为实现从列表到详情,返回列表原位置的方法
Aug 31 Javascript
性能优化篇之Webpack构建速度优化的建议
Apr 03 Javascript
在vue中使用jsx语法的使用方法
Sep 30 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模板,主要想体现一下思路
2006/12/25 PHP
利用浏览器的Javascript控制台调试PHP程序
2014/01/08 PHP
浅析php-fpm静态和动态执行方式的比较
2016/11/09 PHP
PHP使用第三方即时获取物流动态实例详解
2017/04/27 PHP
PHP实现双链表删除与插入节点的方法示例
2017/11/11 PHP
扩展String功能方法
2006/09/22 Javascript
jquery 表单下所有元素的隐藏
2009/07/25 Javascript
ajax 缓存 问题 requestheader
2010/08/01 Javascript
JS this作用域以及GET传输值过长的问题解决方法
2013/08/06 Javascript
js获取url参数代码实例分享(JS操作URL)
2013/12/13 Javascript
jquery预览图片实现鼠标放上去显示实际大小
2014/01/16 Javascript
原生js的弹出层且其内的窗口居中
2014/05/14 Javascript
微信小程序 实现拖拽事件监听实例详解
2016/11/16 Javascript
基于jquery trigger函数无法触发a标签的两种解决方法
2018/01/06 jQuery
ES6之模版字符串的具体使用
2018/05/17 Javascript
angularjs手动识别字符串中的换行符方法
2018/10/02 Javascript
vue与bootstrap实现简单用户信息添加删除功能
2019/02/15 Javascript
使用Node.js在深度学习中做图片预处理的方法
2019/09/18 Javascript
Python合并字符串的3种方法
2015/05/21 Python
Python六大开源框架对比
2015/10/19 Python
python 读取DICOM头文件的实例
2018/05/07 Python
Jupyter notebook无法导入第三方模块的解决方式
2020/04/15 Python
利用HTML5实现使用按钮控制背景音乐开关
2015/09/21 HTML / CSS
巴西家用小家电购物网站:Polishop
2016/08/07 全球购物
豆腐の盛田屋官网:日本自然派的豆乳面膜、肥皂、化妆水、乳液等
2016/10/08 全球购物
英国打印机墨水和碳粉商店:Printerinks
2017/06/30 全球购物
GANT葡萄牙官方商店:拥有美国运动服传统的生活方式品牌
2018/10/18 全球购物
家居设计专业个人自荐信范文
2013/11/26 职场文书
终端业务员岗位职责
2013/11/27 职场文书
办护照工作证明范本
2014/01/14 职场文书
工地安全检查制度
2014/02/04 职场文书
高中生操行评语
2014/04/25 职场文书
应届毕业生自荐书
2014/06/18 职场文书
学校节能宣传周活动总结
2014/07/09 职场文书
2015年护士节活动策划方案
2015/05/04 职场文书
2016三严三实专题教育活动心得体会
2016/01/06 职场文书