jQuery+正則+文本框只能輸入數(shù)字的實(shí)現(xiàn)方法

更新時(shí)間：2016年10月07日 11:37:14 投稿：jingxian

下面小編就為大家?guī)硪黄猨Query+正則+文本框只能輸入數(shù)字的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

網(wǎng)站中的一個(gè)小功能：要求用戶只能輸入16位數(shù)字。

試過javascript的方法：

如：一種方法：

//只允許輸入數(shù)字
     function checkkey2(value, e) {
       var key = window.event ? e.keyCode : e.which;
       if ((key > 95 && key < 106) || (key > 47 && key < 60)) {

       }
       else if (key != 8) {
         if (window.event) //IE
         {
           e.returnValue = false; 
         }
         else //Firefox
         {
           e.preventDefault();
         }
       };
     };

另一種方法：

用正則表達(dá)式限制只能輸入數(shù)字：
onkeyup="value=value.replace(/[^/d] /g,'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^/d]/g,''))"

上面的兩種方法我均用過，但多少都會(huì)出現(xiàn)一些問題，比如瀏覽器的兼容性問題，不能達(dá)到想要的效果等，所以，最后還是考慮用正則來自己寫。

直接貼代碼了，很簡(jiǎn)單的正則表達(dá)式：

<head>
  <meta http-equiv="x-ua-compatible" content="IE=EmulateIE7" />
  <title></title>
  <!-- http://www.cnblogs.com/babycool -->
  <script src="../js/jquery-1.7.2.min.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(function () {
      $("#xxxxxx").keyup(function () {
        //如果輸入非數(shù)字，則替換為''，如果輸入數(shù)字，則在每4位之后添加一個(gè)空格分隔
        this.value = this.value.replace(/[^\d]/g, '').replace(/(\d{4})(?=\d)/g, "$1 ");
      })
    });
  </script>
</head>
<body>
  限制只能輸入19個(gè)字符
  <input id="xxxxxx" type="text" name="name" value="" maxlength="19" />
  <br />
 
  <br />
  輸入非數(shù)字替換為''
  <input type="text" name="name" value="" onkeyup="value=value.replace(/[^\d]/g,'')" />
  <br />
  <br />
</body>

頁(yè)面效果：

瀏覽器的兼容性：

我在IE7.8.9.10下，firefox，chrome下測(cè)試均可以。

以上就是小編為大家?guī)淼膉Query+正則+文本框只能輸入數(shù)字的實(shí)現(xiàn)方法全部?jī)?nèi)容了，希望大家多多支持腳本之家~

您可能感興趣的文章:

相關(guān)文章

JQuery中基礎(chǔ)過濾選擇器用法實(shí)例分析
這篇文章主要介紹了JQuery中基礎(chǔ)過濾選擇器用法,涉及jQuery屬性選擇及樣式操作的相關(guān)技巧,需要的朋友可以參考下
2015-05-05
jquery獲取form表單input元素值的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)硪黄猨query獲取form表單input元素值的簡(jiǎn)單實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-05-05
jQuery幫助之CSS尺寸(五)outerHeight、outerWidth
在前面我們分別通過innerHeight()和innerWidth()來獲得第一個(gè)匹配元素內(nèi)部區(qū)域的高度和寬度，我們?cè)趹?yīng)用中往往除了需要內(nèi)部的尺寸，同樣還需要知道外部的高度和寬度.
2009-11-11
Jquery中offset()和position()的區(qū)別分析
這篇文章主要介紹了Jquery中offset()和position()的區(qū)別,實(shí)例分析了offset()與position()的使用的技巧與區(qū)別,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-02-02
jQuery實(shí)現(xiàn)電梯導(dǎo)航模塊
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)電梯導(dǎo)航模塊，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-12-12
jQuery前端框架easyui使用Dialog時(shí)bug處理
本文介紹了在jQuery前端框架easyui開發(fā)UI時(shí)，使用Dialog時(shí)發(fā)現(xiàn)遮罩無法覆蓋頁(yè)面內(nèi)容，而且對(duì)話框也顯示不出來，經(jīng)過一番研究，才發(fā)現(xiàn)問題所在，這里分享給大家，有相同情況的小伙伴可以參考下
2014-12-12
基于JQuery的動(dòng)態(tài)刪除Table表格的行和列的代碼
基于JQuery的動(dòng)態(tài)刪除Table表格的行和列的代碼以前腳本之家也發(fā)布過相關(guān)的代碼，大家可以參考下。
2011-05-05
利用jQuery實(shí)現(xiàn)輪播圖效果
這篇文章主要為大家詳細(xì)介紹了利用jQuery實(shí)現(xiàn)輪播圖效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-08-08
jQuery的實(shí)例及必知重要的jQuery選擇器詳解
下面小編就為大家?guī)硪黄猨Query的實(shí)例及必知重要的jQuery選擇器詳解。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-05-05
Jquery中獲取iframe的代碼
在一下網(wǎng)頁(yè)中，一些人會(huì)用到iframe，dom獲取頁(yè)面中的iframe還是很簡(jiǎn)單的
2011-01-01