编程 Javascript

纯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实现只能输入数字的简单代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持！

纯JS实现只能输入数字的简单代码

- Author -

FEDDDWQWQE

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

js在指定位置增加节点函数insertBefore()用法实例

Jan 12 Javascript

谈谈impress.js初步理解

Sep 09 Javascript

JavaScript setTimeout使用闭包功能实现定时打印数值

Dec 18 Javascript

js实现select二级联动下拉菜单

Apr 17 Javascript

原生js仿jquery animate动画效果

Jul 13 Javascript

JavaScript对象引用与赋值实例详解

Mar 15 Javascript

vue2.0开发入门笔记之.vue文件的生成和使用

Sep 19 Javascript

js变量值传到php过程详解将php解析成数据

Jun 26 Javascript

改进 JavaScript 和 Rust 的互操作性并深入认识 wasm-bindgen 组件

Jul 13 Javascript

vue遍历对象中的数组取值示例

Nov 07 Javascript

如何构建 vue-ssr 项目的方法步骤

Aug 04 Javascript

jquery简易手风琴插件的封装

Oct 13 jQuery

详解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