快捷導航

純JS實現(xiàn)只能輸入數(shù)字的簡單代碼

更新時間：2017年06月21日 17:31:16 作者：FEDDDWQWQE

本文給大家分享一段簡單的代碼基于js實現(xiàn)只能輸入數(shù)字的方法，非常不錯，具有參考借鑒價值，需要的的朋友參考下吧

只能輸入數(shù)字

<!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'];
      //只能輸入數(shù)字
      addEvent(content,'keypress',function(evt){
        var e = evt || window.event;
        var charCode = getCharCode(evt);
        // alert(charCode); 獲取按鍵編碼
        //正則表達式來獲取文本是否為數(shù)字
        if(!/\d/.test(String.fromCharCode(charCode)) && charCode > 8){
          preDef(evt);  //屏蔽掉非數(shù)字鍵盤的輸入
        }
      });
      //只能輸入數(shù)字 驗證數(shù)據(jù)非法后取消輸入
      addEvent(content,'keyup',function(evt){
        this.value = this.value.replace(/[^\d]/g,'');  //非數(shù)字鍵轉(zhuǎn)換為空
      });
    });
    // 所需要的封裝函數(shù)
    //跨瀏覽器添加事件
    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實現(xiàn)只能輸入數(shù)字的簡單代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

javascript[js]獲取url參數(shù)的代碼
多瀏覽器兼容用javascript獲取url參數(shù)的方法比較推薦的一種
2007-10-10
javascript實現(xiàn)延時顯示提示框特效代碼
本文給大家分享的是javascript通過setTimeout實現(xiàn)延時顯示提示框的特效代碼，效果非常棒，這里推薦給大家
2016-04-04
js中DOM事件綁定分析
在這篇文章中小編給大家整理了關(guān)于JS中DOM事件綁定的相關(guān)知識點，有興趣的朋友趕快學習參考下。
2018-03-03
JS點擊縮略圖整屏居中放大圖片效果
今天開發(fā)的時候，遇到要點擊縮略圖之后居中顯示圖片的大圖查看（大致效果如上圖所示）~想了好幾種實現(xiàn)方式,下面通過本文給大家分享JS點擊縮略圖整屏居中放大圖片效果，需要的朋友參考下吧
2017-07-07
ES6 Promise對象概念及用法實例詳解
這篇文章主要介紹了ES6 Promise對象概念及用法,結(jié)合實例形式詳細分析了ES6中Promise對象的概念、原理、創(chuàng)建、使用方法及相關(guān)操作注意事項,需要的朋友可以參考下
2019-10-10
JavaScript實現(xiàn)簡單省市聯(lián)動
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)簡單省市聯(lián)動，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-10-10
常見的javascript跨域通信方法
這篇文章主要介紹了常見的javascript跨域通信方法
2015-12-12
JavaScript Sort 的一個錯誤用法示例
這篇文章主要介紹了JavaScript Sort 的一個錯誤用法示例,本文分析了一個Sort實例得到了這個錯誤用法并給出了解決方法,需要的朋友可以參考下
2015-03-03
JS中的進制轉(zhuǎn)換以及作用
這篇文章主要介紹了JS中的進制轉(zhuǎn)換以及作用的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
2016-06-06
利用JS解決ie6不支持max-width,max-height問題的方法
本篇文章主要介紹了利用JS解決ie6不支持max-width,max-height問題的方法。需要的朋友可以過來參考下，希望對大家有所幫助
2014-01-01