JavaScript 文字框只能輸入數字

admin發表於2019-01-10
JavaScript

在很多實際需要中，需要對輸入的內容進行限制，比如有些地方只能夠輸入數字，例如大家經常使用的QQ號碼和郵編等，下面就簡單介紹一下如何實現此功能。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>   
<html>   
<head>   
<meta charset=" utf-8">   
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<script type="text/javascript"> 
window.onload=function() { 
  var txt=document.getElementById("ant"); 
  txt.onkeyup=function() { 
    txt.value=txt.value.replace(/[^\d]/g,''); 
  } 
  txt.onbeforepaste=function() { 
    clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''));   
  }
    txt.oncontextmenu = function () {
      return false;
    } 
} 
</script> 
</head> 
<body> 
只能夠輸入數字:<input id="ant" name="ant" /> 
</body> 
</html>

下面介紹一下實現過程。

一.程式碼註釋:

（1）.window.onload=function() { }，當文件內容完全載入完畢再去執行函式中的程式碼。

（2）.var txt=document.getElementById("ant")，獲取文字框物件。

（3）.txt.onkeyup=function() {}，為文字框註冊keyup事件處理函式。

（4）.txt.value=txt.value.replace(/[^\d]/g,'')，將輸入內容的非數字內容替換為空。

（5）.txt.oncontextmenu = function () {return false;}，防止右鍵複製黏貼。

二.相關閱讀:

（1）.document.getElementById()參閱document.getElementById()一章節。

（2）.keyup事件參閱JavaScript keyup 事件一章節。

（3）.replace()參閱正規表示式 replace()一章節。

（4）.contextmenu事件參閱JavaScript contextmenu 事件一章節。

相關文章