首頁 > 開發者 > JavaScript

JS 屏蔽非數字字元的輸入

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

為了避免無效資料的另一種方法是在使用者錄入資料時 對無效輸入進行屏蔽， 例如在輸入銀行卡號時， 要求使用者必須輸入數字， 當使用者輸入非數字字元是，給出提示。

下面給出代碼：


[html] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>屏蔽 非數字字元的輸入</title> 
<style> 
body{ font:10px; } 
span{ color:red; } 
</style> 
<script> 
function is_number(e){ 
    //IE 中 Event 對象使用 keyCode 獲得鍵入字元的 Unicode 編碼 
    //DOM 中 Event 對象 使用 charCode 獲得鍵入字元的 Unicode 編碼 
    var char_code = e.charCode ? e.charCode : e.keyCode; 
    //Unicode 編碼中， 0~9 的編碼的十進位 是 48~57 之間 ， 0為 48， 9 為57 
    if(char_code<48 || char_code >57){ 
        alert("只允許輸入數字");    
        return false; 
    } 
    else{ 
        return true;     
    } 
} 
</script> 
</head> 
 
<body> 
<form name="user_info" method="post"> 
<table width="400" height="1" border="0" cellpadding="0" cellspacing="0"> 
  <tr> 
      <td align="right">使用者名稱：</td> 
      <td align="left"><input type="text" name="user_name" size="15" /><span>*</span></td> 
  </tr> 
  <tr> 
      <td align="right">密碼：</td> 
      <td align="left"><input type="password"  name="user_pwd" size="15" /><span>*</span></td> 
  </tr> 
  <tr> 
      <td align="right">銀行帳號：</td> 
      <td align="left"><input type="text" name="user_account_no" size="15" onkeypress="return is_number(event)" /><span>*</span></td> 
  </tr> 
  <tr> 
      <td align="right">E-mail:</td> 
      <td align="left"><input type="text" name="user_email" size="15" /><span>*</span></td> 
  </tr> 
  <tr> 
      <td align="right">簡歷：</td> 
      <td align="left"><textarea name="user_intro" cols="16" rows="5" ></textarea><span>*</span></td> 
  </tr> 
  <tr> 
      <td align="right"></td> 
      <td align="left"><input type="submit" value="提交" onclick="return check_form()" /></td> 
  </tr> 
 </table> 
</form> 
</body> 
</html> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>屏蔽 非數字字元的輸入</title>
<style>
body{ font:10px; }
span{ color:red; }
</style>
<script>
function is_number(e){
 //IE 中 Event 對象使用 keyCode 獲得鍵入字元的 Unicode 編碼
 //DOM 中 Event 對象 使用 charCode 獲得鍵入字元的 Unicode 編碼
 var char_code = e.charCode ? e.charCode : e.keyCode;
 //Unicode 編碼中， 0~9 的編碼的十進位 是 48~57 之間 ， 0為 48， 9 為57
 if(char_code<48 || char_code >57){
  alert("只允許輸入數字"); 
  return false;
 }
 else{
  return true; 
 }
}
</script>
</head>

<body>
<form name="user_info" method="post">
<table width="400" height="1" border="0" cellpadding="0" cellspacing="0">
  <tr>
      <td align="right">使用者名稱：</td>
      <td align="left"><input type="text" name="user_name" size="15" /><span>*</span></td>
  </tr>
  <tr>
      <td align="right">密碼：</td>
      <td align="left"><input type="password" name="user_pwd" size="15" /><span>*</span></td>
  </tr>
  <tr>
      <td align="right">銀行帳號：</td>
      <td align="left"><input type="text" name="user_account_no" size="15" onkeypress="return is_number(event)" /><span>*</span></td>
  </tr>
  <tr>
      <td align="right">E-mail:</td>
      <td align="left"><input type="text" name="user_email" size="15" /><span>*</span></td>
  </tr>
  <tr>
      <td align="right">簡歷：</td>
      <td align="left"><textarea name="user_intro" cols="16" rows="5" ></textarea><span>*</span></td>
  </tr>
  <tr>
      <td align="right"></td>
      <td align="left"><input type="submit" value="提交" onclick="return check_form()" /></td>
  </tr>
 </table>
</form>
</body>
</html>

 

 

以上代碼中 ， is_number() 函數 用於屏蔽非數字字元的輸入。 函數中， 通過Event 對象 的屬性 得到按下 鍵 的 Unicode 編碼， 對於 IE瀏覽器 採用 keyCode 屬性， 而對於 DOM 瀏覽器採用 charCode 屬性。 在 Unicode 編碼中 ， 0~9 的編碼是 48~57（十進位）之間的連續值， 0 的編碼是 48 ， 9的編碼是 57， 當 按下鍵的編碼 超出 48~57 這個有效範圍時， 變為非數字字元。

 

說明：

IE瀏覽器 沒有 charCode 屬性 ， keyCode 屬性 在 keypress 事件中 得到 與 DOM 中 charCode 屬性相同的值， 及按下 鍵 的 Unicode 編碼。

 

is_number()函數 被賦予銀行帳號 文字框的onkeypress 事件 控制代碼（按下鍵後放開時觸發），當使用者鍵入字元時， 對鍵入的字元進行有效性的檢測。 如果檢測到鍵入的字元為非數字字元， 則返回 false。 keypress 事件 的預設 操作 是在 按鍵放開後 鍵入字元， 當 onkeypress 事件控制代碼得到 false 值 時， 便阻止預設操作即阻止字元的鍵入。

 

注意：

在 將 is_number() 函數 賦予 onkeypress 事件控制代碼時， 注意使用 return 關鍵字， 這樣才能阻止 非數字字元的鍵入。

Over！！！

 摘自 SongYanJun2011
 

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More